jQuery function not working on AJAX loaded content

Question

I have a page index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Lufia</title>
    <script src="js/jquery.js" language="javascript"></script>
    <script language="javascript">

    $(document).ready(function() {
      $("button").click(function() {
        $('#mydiv').html( 'Loading... ').load('welcome.html');
        $(this).hide();
      });
    });

    </script>
  </head>
  <body>
    <button>ajax</button><div id="mydiv"></div>
  </body>
</html>

In this code when button is clicked in midiv welcome.html is loaded and button gets hidden.

welcome.html is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Lufia</title>
  </head>
  <body>
    <button>New Button</button>
  </body>
</html>

This new button's onClick is not working. Why?

Lix · Accepted Answer · 2013-03-20 13:12:55Z

14

Simple solution here - you'll need to use the jQuery .live() function to add an event handler for the new button.

$("#newButton").live('click',function(){
  // Do stuff here
});

When you initially created the .click() handler, that second button was not yet in the DOM, so jQuery could not attach an event handler to it. The .live() function will work for any element that is already in the DOM and also any element that will be added in the future (e.g. from an ajax call).

You might want to give your new button (from the ajax call) a new and different ID as the selector $("button") will capture both your buttons (even though one is hidden).

NOTE!

Since version 1.7 of jQuery, the live() method has been deprecated!. As of version 1.9 this function will be removed completely... The correct way to deal with event handlers of these dynamically added elements is now to use the on() function.

edited Mar 20, 2013 at 13:12

answered Apr 15, 2012 at 12:19

Lix

48.2k12 gold badges107 silver badges134 bronze badges

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

1 Comment

Lix Over a year ago

You will have to change the .click() function to the .live() function that I have given as an example.

Ranadheer Reddy · Accepted Answer · 2013-06-20 06:48:57Z

4

Live is deprecated. You should use on.

$(document).on("click","button", function () {

is the live/delegated format of on.

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

answered Jun 20, 2013 at 6:48

Ranadheer Reddy

4,33212 gold badges59 silver badges78 bronze badges

Comments

Menztrual · Accepted Answer · 2012-04-15 12:31:16Z

2

Because the button hasn't got anything bound to it.

So in welcome.html you would have to add code to handle it.

Alternatively; You could bind the onclick handler in a function and then on the ajax.done() method bind that handler to the new button.

Best method would be to do something like: Note This has not been tested AT all.

<script language="javascript">
$(document).ready(function(){

var buttonClickEvent = function(){
  $.ajax({
     url: "test.html",
  }).done(function(results) { 
    $('#mydiv').html(results);
    $('button').live('click',buttonClickEvent);
  });
}

$("button").click(buttonClickEvent);

</script>

Alternatively:

welcome.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Lufia</title>

<body><button>New Button</button>

<script>
 $(document).ready(function(){
    $("button").click(function(){
       //do something
    });
 });
</script>

edited Apr 15, 2012 at 12:31

answered Apr 15, 2012 at 12:20

Menztrual

41.7k12 gold badges59 silver badges70 bronze badges

2 Comments

Lix Over a year ago

+1 Depending on how much and exactly what content is being loaded in the AJAX call, your second option would defiantly be a good alternative...

user1432124 Over a year ago

Your second way is very helpful for me

Kapil Kumar · Accepted Answer · 2017-04-23 10:12:09Z

0

Check properly that you given the right path for jquery in your code. It might be the reason that the code is not working.....

answered Apr 23, 2017 at 10:12

Kapil Kumar

1513 bronze badges

Comments

Ebrahim · Accepted Answer · 2012-04-30 16:32:39Z

-1

It is usually because of the files included incorrectly.

I have included the jquery.hotkeys-0.7.9.min.js and it distoryed my maskings.

After 2 hours of code checking, when I removed the file. The problem was solved;

:)

edited Apr 30, 2012 at 16:32

answered Apr 30, 2012 at 15:48

Ebrahim

1,8272 gold badges26 silver badges32 bronze badges

1 Comment

bPratik Over a year ago

This is a very low quality answer AND it was posted 15 days after the OP Accepted an answer. I see that this helped you here, but it still is not a relevant answer for this question.

Collectives™ on Stack Overflow

jQuery function not working on AJAX loaded content

5 Answers 5

NOTE!

1 Comment

Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

NOTE!

1 Comment

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related