jquery click event doesn't work

Question

I wrote this code , and I need to handle click events with jquery , but it doesn't work in any browser , when I click any elements nothing happens. The divs has no z-index in css;

The hole "news" element adds dynamically This is html code

<div class="news">
            <div class="meta-inform">
                <div id="waiting">not accepted</div>
                <div id="accpted">accepted</div>

                <div class="edit">
                <div class="editedBy" id="editedBy" >
                    <div id="editLabel"  style="display:inline">edited by</div>
                    <div id="editorName"  style="display:inline">arvin</div>
                </div>

                <div id="editTime" class="editTime">
                    <div id="editDate" style="display:inline" >چdate</div>
                    <div id="editDate" style="display:inline">time</div>
                </div>
                </div>

            </div>

        <div id="littleNews">
            <div id="number">1000</div>
            <div id="divider1"></div>
            <div id="title">title</div>
            <div id="divider2"></div>
            <div id="littleNewsTime">time</div>
            <div id="littleNewsDate">date</div>
            <div id="divider3"></div>
            <div id="category">cat</div>
            <div id="part">part</div>
            <div id="segment">sgmnt</div>
            <div id="divider4"></div>
            <div id="writer">writer</div>
            <div id="view">view post</div>
        </div>

        <div class="functions">
            <div id="edit">edit</div>
            <div id="delete">delete</div>
            <div id="accptThis">accept</div>
        </div>
        </div>

and this is my jquery codes

$(document).ready(function () {
    $("#littleNews").click(function () {
        alert("hi");
    });
}); 

and it doesn't works for any element in "news" class

I have this code and this code creates the whole div

$("#news").clone().appendTo("#mainDiv").attr("id","news"+(i+1))

Answer 1

Your code and HTML works just fine here in a jsFiddle as you've shown it. So, it is not an issue with those things exactly as you've shown them. It is more likely something with the environment in your page or dynamic HTML. Some possibilities:

1. Your HTML elements are added dynamically AFTER you install the event handler.
2. You don't have jQuery installed properly.
3. You have a script error that prevents other scripts from running.
4. You have duplicate IDs somewhere in your page.
5. You aren't using the right selector (perhaps you want ".news")

---

If your HTML is added dynamically after the event handlers are installed, then you need to use delegated event handling like this:

$(document).ready ( function () {
    $(document).on ("click", "#littleNews", function () {
        alert("hi");
    });
});

Tip: $(document) should actually be the closest parent to #littleNews that is not dynamically created after the event handler is installed. I don't know what that is so I picked the safest $(document), but things perform better (particularly if you have lots of delegated event handlers) if you use the closest static parent.

---

It's unclear from your question, but if you also want your event handler to cover everything in .news, you would need to change your selector to cover that.

Answer 2

try something like this

            $(document).on('click','#littleNews',function () {
                alert("hi");
            });