After injecting html by jquery, the event handlers doesn't work with/without delegate

Question

I have a list of <div> s with same html but different values inside html. The hierarchy is the following ;

<div id="element">
    <div class="likecomm">
        <a class="commenticon" href="#">...some value according to the returning value...</a>
    </div>
</div>

<div id="element">
    <div class="likecomm">
        <a class="commenticon" href="#">...some value according to the returning value...</a>
    </div>
</div>

In an event, I inject html to the top of the list which is another <div id="element> ... </div>

I have the following event handler for comment icon click;

$('.commenticon').click(function(){
    $(this).closest('.actionframe').next('nav').slideToggle(300);
    return false;
});

It works correct until I insert the new <div id="element> ... </div>. The comment icon click event handler doesn't match. I searched about that problem, all were saying that .delegate() should be used.

My problem is I don't know where to use the delegate function. Before, I get the results from ajax in order to inject the <div id="element> ... </div> , I used .delegate() function in ajax call that injects html.

$.ajax({

    success:function(data) {

        var html=... // the necessary div html binded with data
        // prepend function call()

        $('.likecomm').delegate(".commenticon","click" , function() {                      
                       $(this).closest('.actionframe').next('nav').slideToggle(300);
                       return false;
        }); 

    }        
});

Currently, it doesn't work. So, any ideas how to make this thing work ?

Why do you have two elements with the same `id`. When you are holding `id`s in `siblings` it is best to maintain their uniqueness. — jmishra, Feb 22 '12 at 08:07
If you are using jquery 1.7+ consider using on() instead of click() or delegate(). it should do the job. — grunk, Feb 22 '12 at 08:08
[Live function](http://api.jquery.com/live/) or [on function](http://api.jquery.com/on/) with this trick: `$(document).on("click", selectorString, f);` — noob, Feb 22 '12 at 08:08

James Allardice · Accepted Answer · 2012-02-22T08:11:01.787

You need to bind the event handler to a common ancestor of the elements on which it should be triggered. For example, if your #element gets appended inside a div with an id of parent:

$("#parent").delegate(".commenticon", "click", function() {
    //Do stuff
});

This would be for an HTML structure like so:

<div id="parent">
    <div class="element">

    </div>
    <div class="element">

    </div>
</div>

The reason this works is that DOM events bubble up the tree from the point at which they originate. The delegate method captures the event at an ancestor element and checks whether or not it originated at an element matching the selector.

Also note that it's invalid to have duplicate id values in the same document. Here I've changed your element ID values to class names instead.

Finally, if you are using jQuery 1.7+ you should use the on method instead. It will have the same effect, but notice the reversal of the first 2 arguments:

$("#parent").on("click", ".commenticon", function() {
    //Do stuff
};

a note, "delegate" is superseeded by "on" as of jquery 1.7. – Asken Feb 22 '12 at 08:08 — Asken, Feb 22 '12 at 08:08
@Asken - Yes, I'm getting to that. – James Allardice Feb 22 '12 at 08:09 — James Allardice, Feb 22 '12 at 08:09

score 0 · Answer 2 · answered Feb 22 '12 at 08:08

You are adding <div id="element> ... </div> which means that those doesn't exist initially. You need to add delegate to upper level that exists. Then any .commenticon that is added under the "container" will have click event.

$('#container').delegate(".commenticon","click" , function() {                      
    $(this).closest('.actionframe').next('nav').slideToggle(300);
    return false;
});

After injecting html by jquery, the event handlers doesn't work with/without delegate

2 Answers2

Linked