CODEWITHSUNDEEP
jqueryajax
user1432124
user1432124

Reputation:

jQuery function not working on AJAX loaded content

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?

Upvotes: 3

Views: 14221

Answers (5)

Kapil Kumar
Kapil Kumar

Reputation: 141

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

Upvotes: 0

Ranadheer Reddy
Ranadheer Reddy

Reputation: 4324

Live is deprecated. You should use on.

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

is the live/delegated format of on.

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

Upvotes: 4

Lix
Lix

Reputation: 48006

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.

Upvotes: 14

Ebrahim
Ebrahim

Reputation: 1818

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;

:)

Upvotes: -1

Menztrual
Menztrual

Reputation: 41607

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>

Upvotes: 2

Related Questions