.click event does not work in jquery
I have following script in my page :
$(document).ready(function () {
$('.RemoveLink').click(function () {
//dialog box
$('#dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
resizable: false
});
//end dialog box
var fileAddress = this.id;
var parent=$(this).parent().parent();
$('#dialog').dialog('open');
$('#dialog').dialog({ /*Initialising a confirmation dialog box (with cancel/OK button)*/
buttons: {
"delete": function () {
$(this).dialog('close');
$.ajax({
url: "url",
data: { id: fileAddress },
success: function (mydata) {
parent.hide();
//$('#FileThumbs .ImageFileItem[id=' + fileAddress + ']').hide();
},
type: "GET"
});
},
"cancle": function () { //if the User Clicks the button "cancel"
$(this).dialog('close');
}
}
})
return false;
});
$('.ResponseLink').click(function () {
var idval = this.id;
$.ajax({
url: "url",
data: { id: idval },
dataType: 'html',
success: function (mydata) {
$("#ContactArea").empty().append(mydata);
},
type: "GET"
});
return false;
});
});
as you can see I also use jquery ui dial box. when I click a link with 'RemoveLink' class it works properly and dialog pops-up, but after I click on a link with 'ResponseLink' class and then click on a link with 'RemoveLink', the page does not show dialog and link works as a normal link.
Would you please help me ?
Updated : I Am using asp.net mvc , and its partial views. I put some form in a p开发者_如何学Cartial view and used Ajax.BeignForm() method for form to send it asynchronously, but there is a point. To make validation work with Ajax.BeignForm() I should reference necessary scripts, even though I have referenced theme in a view that calls partial view. I removed those re-referenced scripts and now dialog appears again, but I lost client side validation on form!!!!!
Use .delegate
instead of .click
$('#ContactArea').delegate('.RemoveLink', 'click', function (e) {...
In your case, you are attaching the click
event to the .RemoveLink
elements that were present at the time of attaching the click event handlers. Once you empty and clear out, those are replaced by new set of elements which don't have the event handler attached.
Using .delegate
will make sure that however the content inside #ContactsArea
changes, the .RemoveLink
elements inside it will continue to be handled. Read more up on it in the docs.
精彩评论