.click event does not work after ajax request

Question

I am using jQuery 1.7.2 version and I am submitting my form using Ajax like that

$("input#addPostSubmit").click( function(){ $.ajax({ //this is the php file that processes the data and send mail url: BASE_URL+"post/ajaxcreate", //POST method is used type: "POST", //pass the data data: $("#addImage").serialize(), //Do not cache the page cache: false, //success success: function (html) { var obj = jQuery.parseJSON(html); if(obj.Status == 'Success'){ $("#error").removeClass('hide'); $("#error").addClass('success'); $("#error").html(obj.Message); $.fn.colorbox.resize(); setTimeout(function(){$.fn.colorbox.close()},5000); window.parent.location.reload(); } if(obj.Status == 'Fail'){ $('.add_post_submit').html('<input type="button" id="addPostSubmit" value="Create" />'); $("input#addPostSubmit").removeAttr('disabled'); $("#error").removeClass('hide'); $("#error").addClass('error'); error = obj.Message.split(';'); html = '<ul>'; for(a=0;a<error.length;a++){ html += '<li>'+error[a]+'</li>'; } html += '</ul>'; $("#error").html(html); $('html').css({overflow: 'hidden'}); $.fn.colorbox.resize(); } } }); });

For example, null is not allowed on one of the form field. When server validate form and returns errors I show it, when I again click the button it not worked.

It is working fine but the problem is when ajax request is completed and server returns any form error then submit button did not work.

May be you should use return false; in the first line inside the click function, so that the default action is cancelled out. — NedStarkOfWinterfell
– NedStarkOfWinterfell, Commented Sep 12, 2012 at 15:04
what do you mean exactly when you say "did not worked"? Can you isolate a snippet that demonstrates the issue on jsfiddle? — Lie Ryan
– Lie Ryan, Commented Sep 12, 2012 at 15:05
I have explain little more hope i am able to explain my problem — Muhammad Umair
– Muhammad Umair, Commented Sep 12, 2012 at 15:11

vonflow · Accepted Answer · 2012-09-12 15:18:34Z

i'd recommend listening to the submit event on the document, instead of the click handler.

$(document).on('submit','form',function(e){ e.preventDefault(); $.ajax({ //this is the php file that processes the data and send mail url: BASE_URL+"post/ajaxcreate", //POST method is used type: "POST", //pass the data data: $("#addImage").serialize(), //Do not cache the page cache: false, //success success: function (html) { // come code } }); });

Collectives™ on Stack Overflow

.click event does not work after ajax request

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related