How to dynamically add a click handler to an li with jQuery

Question

I'm trying to add a click handler to an li that is added to the DOM through jQuery. I thought this is the way you did it:

jQuery('.deleteUpload').on('click', '.deleteUpload', function() {
    var strDocId = jQuery(this).prop('id');
    //if (confirm('Are you sure you want to delete this resource') == true) {
        $.post('/study-clubs/meetings/delete-upload', {strDocId : strDocId},
            function(objData){
                console.log(objData);
            }
        );
        jQuery('li#' + strDocId).remove();
    //}

    return false;
});

Here is my markup:

<li class="pdf deleteLi" id="<?php echo $this->escape($this->objDocRow->id); ?>">
   <label><input type="radio" name="documents[1]" value="0" /> Pre-Meeting</label> &nbsp;
   <label><input type="radio" name="documents[1]" value="1" /> Post-Meeting</label> &nbsp;
   <label><input type="radio" name="documents[1]" value="2" checked /> Do Not Use</label> &nbsp;
   <a href="#" class="deleteUpload" id="2">Delete</a> &nbsp;
   <a href="/..."><?php echo substr($this->escape($this->objDocRow->doc_title), 0, -4); ?></a>
</li>

I want to delete the li when you click on the a tag with a class of deleteUpload. What am I doing wrong? When I click on it, I'm taken to the top of the page. I also tried deleteLi instead of deleteUpload in the jQuery, but that didn't work either.

Try jQuery(document).on('click', '.deleteUpload', function() { — jtheman
– jtheman, Commented May 9, 2013 at 21:21
You can use .bind() and .unBind() api.jquery.com/bind to add/remove click handlers. — Christopher Marshall
– Christopher Marshall, Commented May 9, 2013 at 21:21
@ChristopherMarshall: on() is the new, cooler way to attach event handlers these days. bind() will soon join the deprecated methods like live() ;). — Matt
– Matt, Commented May 9, 2013 at 21:23
Thanks, jtheman. I knoew there was something I was forgetting. — sehummel
– sehummel, Commented May 9, 2013 at 21:24
I really dig .on() @Matt, Thanks for the heads up on deprecation! — Christopher Marshall
– Christopher Marshall, Commented May 9, 2013 at 21:26

Turnip · Accepted Answer · 2013-05-09 21:23:12Z

2

Try changing the first line to:

jQuery('.deleteLi').on('click', '.deleteUpload', function() {

answered May 9, 2013 at 21:23

Turnip

36.8k15 gold badges92 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

stevenhancock · Accepted Answer · 2013-05-09 21:24:12Z

1

There's no need to have the second selector. With it jquery will look for a child of .deleteUpload that has the class deleteUpload.

jQuery('.deleteUpload').on('click', function() {
    var strDocId = jQuery(this).prop('id');
    //if (confirm('Are you sure you want to delete this resource') == true) {
        $.post('/study-clubs/meetings/delete-upload', {strDocId : strDocId},
            function(objData){
                console.log(objData);
            }
        );
        jQuery('li#' + strDocId).remove();
    //}

    return false;
});

answered May 9, 2013 at 21:24

stevenhancock

831 silver badge3 bronze badges

Collectives™ on Stack Overflow

How to dynamically add a click handler to an li with jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related