Reputation: 5568
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>
<label><input type="radio" name="documents[1]" value="1" /> Post-Meeting</label>
<label><input type="radio" name="documents[1]" value="2" checked /> Do Not Use</label>
<a href="#" class="deleteUpload" id="2">Delete</a>
<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.
Upvotes: 0
Views: 80
Reputation: 83
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;
});
Upvotes: 1
Reputation: 36742
Try changing the first line to:
jQuery('.deleteLi').on('click', '.deleteUpload', function() {
Upvotes: 2