Bind click to li's child

Question

I have this HTML

<ul class="list-row">
    <li>
        <input name="field1" class="field1" type="text" placeholder="field 1">
        <input name="field2" class="field2" type="text" placeholder="field 2">
        <p class="delrow">Delete row</p> 
    </li>
    <li>
        <input name="field1" class="field1" type="text" placeholder="field 1">
        <input name="field2" class="field2" type="text" placeholder="field 2">
        <p class="delrow">Delete row</p> 
    </li>
    <p class="addrow">Add row</p> 
</ul>

And when i click on Add row i append a new li with the elements that i need. The function on jQuery is this one:

$(".addrow").on("click",function() {
    $(this).before("<li>\n\
        <input name='field1' class='field1' type='text' placeholder='field 1' />\n\
        <input name='field2' class='field2' type='text' placeholder='field 2' />\n\
        <p class='delrow'>Delete row</p></li>");

});

What i need is to attach the click event to the new delrow that is appended to the DOM. I tried selecting getting the siblings and finding the p element but i can't make it work.

score 2 · Answer 1 · answered Oct 10 '14 at 15:23

2

This code should work:

$('.list-row').on('click','.delrow',function(){/*do stuff*/});

It will add an event handler to list row, so it will work for appended delrows

answered Oct 10 '14 at 15:23

orhanhenrik

1,407
8
11

score 1 · Accepted Answer · answered Oct 10 '14 at 15:22

$("body").on('click', '.delrow', function () {
   ...
});

Add the click event handler to the body, any click event will bubble up the DOM until it is handled. Here we're looking for a click at the body level, but with an originating element of class delrow. As the body always exists, it will handle clicks for all new elements of .delrow automatically.

score 0 · Answer 3 · answered Oct 10 '14 at 15:22

You can use insertBefore method for this:

$(".addrow").on("click",function() {
    var newElement = $("<li>\n\
        <input name='field1' class='field1' type='text' placeholder='field 1' />\n\
        <input name='field2' class='field2' type='text' placeholder='field 2' />\n\
        <p class='delrow'>Delete row</p></li>").insertBefore( this );

    newElement.find( '.delrow' ).click( function() {
        //your code
    });

});

In this case newElement variable will point to dynamically created HTML

score 0 · Answer 4 · answered Oct 10 '14 at 15:22

0

Add a class to the

element. Then you can use $(".liclass").on("click",function(){do something}); No matter how many

elements you add, you can then have the same handler.

answered Oct 10 '14 at 15:22

Ryan

97
4

score 0 · Answer 5 · answered Oct 10 '14 at 15:23

Just bind it right after you append:

$(".addrow").on("click",function() {
    $(this).before("<li>\n\
        <input name='field1' class='field1' type='text' placeholder='field 1' />\n\
        <input name='field2' class='field2' type='text' placeholder='field 2' />\n\
        <p class='delrow'>Delete row</p></li>");
    });

    $(this).prev("li").find(".delrow").click(function() {});
});

Bind click to li's child

5 Answers5