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

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
– bajran, Commented Aug 18, 2019 at 14:41
Try like this-> $(document).on('click','.signupbtn',function(){ console.log("signed Up");}); — Swati
– Swati, Commented Aug 18, 2019 at 14:44

tom · Accepted Answer · 2019-08-18 14:48:20Z

7

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, 2019 at 14:48

tom

11k6 gold badges37 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bcsta Over a year ago

yep, that worked. (new to jquery)

Kavelin · Accepted Answer · 2019-08-18 14:47:45Z

2

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

answered Aug 18, 2019 at 14:47

Kavelin

4442 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related