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

Question

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.

1] check whether you are able to load the signupbtn div element in browser 2] specify js code after loading your php file, may be your dom is taking time to load — bajran, Aug 18 '19 at 14:41
Try like this-> `$(document).on('click','.signupbtn',function(){ console.log("signed Up");});` — Swati, Aug 18 '19 at 14:44

score 4 · Accepted Answer · answered Aug 18 '19 at 14:48

4

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");
});

answered Aug 18 '19 at 14:48

tom

9,550
6
30
49

yep, that worked. (new to jquery) – bcsta Aug 18 '19 at 14:55

score 2 · Answer 2 · answered Aug 18 '19 at 14:47

https://api.jquery.com/load/

You could use the complete function to check if it has loaded, or you could just put the button function inside there.

  let signUpMode = $(".modal");
  signUpMode.load("login_signup_popup.php", function() {
    $(".signupbtn").on("click", function() {
      console.log("signed Up");
    });
  });

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

2 Answers2