Question

 $(function(){

$(".mailbutton").click(function() {
  var email = $(".mailingfield").val();
  $.post("/PHP_scripts/mailinglist.php", { email: email }, function(data) {
        var content = $(data).find("#mailinglistform");
        $("#box").empty().append(content);
  });
 });
});

I’m using this to process an email address. If it fails in the PHP script the form is sent back in the ‘.mailinglistform’ with a fresh form and some text explaining the error. The problem I have is that even though the button has the ‘.mailbutton’ class in the callback form, the button doesn’t do anything on click.

Is this because the jQuery only recognises it first time round? If so, is there a way to “reload” the ‘mailbutton’ .click function on callback?

Thanks!

Answer 1

You’re right that because you’re only re-rendering a portion of the page, the previous jQuery you wrote does not register with the “new” mailbutton class that you’ve re-rendered. To get around this, you should use .on(), e.g.:

$(".wrapper").on('click', '.mailbutton', function() {
  var email = $(".mailingfield").val();
  $.post("/PHP_scripts/mailinglist.php", { email: email }, function(data) {
        var content = $(data).find("#mailinglistform");
        $("#box").empty().append(content);
  });
 });

In this case, wrapper needs to be a class element that’s outside of the re-rendered section (e.g. the ‘content’ class, maybe a class around your form, etc) of the page, and one that is constantly present (i.e. not re-rendered in the ajax call). This will attach an onclick handler to any .mailbutton classes that are children of the wrapper class, whether they are present when the page is rendered, or if they are added to the DOM later.