jQuery function does not work after jquery.load() fetch the content

Question

I have a page and defined my java script functions in a custom.js file ( I'm using jQuery ). I put JS file at end of body before </body> tag

My page have a div element like this:<div id="userinfo"></div> when my page load, my JS file fetch an external page to that.

external page have a element like this<div id="login"></div>

in my JS file, I defined a function that when user clicked the login a modal window load an show the login form to the user.

but when i load the external page, my JS file does not work!! it seems that can't find the element.

guide me Please! :)

Some part of custom.js file:

jQuery(document).ready(function($) {

 $('#userinfo').load('CustomerOptions.asp');

  (function() {
     $('#login').click(function(event){
         // something to do
     });
  })();

});

You said you put that in your <body></body> tag? Also, do you have an example fiddle or anything? — jeschafe
– jeschafe, Commented Jul 17, 2012 at 16:56

Engineer · Accepted Answer · 2012-07-17 16:56:47Z

1

You may try to use on:

$('#userinfo').on('click','#login',function(){
    //Click logic here
});
$('#userinfo').load('CustomerOptions.asp');

answered Jul 17, 2012 at 16:56

Engineer

48.9k12 gold badges90 silver badges93 bronze badges

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

Comments

Chandu · Accepted Answer · 2012-07-17 16:56:00Z

1

The current version of the code is trying to bind click event handler to #userinfo even before its available in the DOM (since the element is added to DOM via load asynch call).

Try this:

$('#userinfo').load('CustomerOptions.asp', function() {
     $('#login').click(function(event){
         // something to do
     });
});

answered Jul 17, 2012 at 16:56

Chandu

83.2k19 gold badges136 silver badges136 bronze badges

Comments

Marcelo De Zen · Accepted Answer · 2012-07-17 16:58:19Z

0

It not works because you have assigned a event to #login before it is present in DOM. For cases like this you must use "live" events. Live events do not requires that the target element is present in DOM.

jQuery(document).ready(function($) {
   $('#userinfo').load('CustomerOptions.asp');

  $('#userinfo').on('click','#login',function(event){
     // something to do
  });
})();

EDIT: As pointed by @ManselUK, 'live' is deprecated, 'on' must be used.

answered Jul 17, 2012 at 16:58

Marcelo De Zen

9,5173 gold badges39 silver badges50 bronze badges

Comments

Bogdan · Accepted Answer · 2012-07-17 16:56:51Z

-1

Or as an alternative you could use .live() instead of .click().

http://api.jquery.com/live/

answered Jul 17, 2012 at 16:56

Bogdan

44.7k12 gold badges130 silver badges130 bronze badges

1 Comment

Chandu Over a year ago

live is deprecated. on would be a better options.

Collectives™ on Stack Overflow

jQuery function does not work after jquery.load() fetch the content

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related