javascriptphpjqueryjquery-load

jquery onclick not working on element from .load() function

I have a PHP snippet in a separate file which I am loading in a javascript file using jquery:

let signUpMode = $(".modal");
  signUpMode.load("login_signup_popup.php");

This works because I am able to show this on screen. However, this snippet contains a button which I would like to click in the same javascript file where I loaded the snippet. something simple like:

$(".signupbtn").on("click", function(){
    console.log("signed Up");
  });

This click is, however, not working. signupbtn is a div element in the snippet. Somehow I am missing an extra step since jquery seems to not be recognizing the elements in the snippet.

Solution

  • Lazy loaded elements are not recognized from eventhandlers which are already initialized. So you have to set the event on a parent. This should work:

    $(document).on('click', '.signupbtn', function(){ 
    console.log("signed Up");
});