JQuery - button from ajax

Question

I`m from Russia, so sorry for bad English. I am loading a part of webpage with ajax.

for example

<script type="text/javascript">
$("#link1").click(function(){
    $.post("ajax.php", { act: "load" },
    function(data) {
        $("#content").html(data);
    });
});
</script>

<a href="#" id="link1">Click</a>
<div id="content"></div>

Ajax.php returns: <input type="button" id="button1" value="test">

Now I want to control this button from script too. I`m trying:

<script type="text/javascript">
    $("#link1").click(function(){
        $.post("ajax.php", { act: "load" },
        function(data) {
            $("#content").html(data);
        });
    });

    $("#button1").click(function(){
        alert('test');
    });
</script>

but this doesn`t work. Can you help me? Thanks.

Felix Kling · Accepted Answer · 2011-05-23 13:36:31Z

2

$("#button1").click(...);

won't do anything because the element #button1 does not exist yet when you run that code ($("#button1") will not select any element).

Either put it in the callback of your Ajax request:

$.post("ajax.php", { act: "load" }, function(data) {
    $("#content").html(data);
    $("#button1").click(function(){
        alert('test');
    });
});

or use .delegate() / .live():

$("#content").delegate('#button1', 'click', function(){
    alert('test');
});

answered May 23, 2011 at 13:36

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

Comments

Richard Dalton · Accepted Answer · 2011-05-23 13:36:00Z

1

Change it to use:

$("#button1").live('click', function(){
    alert('test');
});

The live function allows events to be fired from elements that are dynamically added to the page.

answered May 23, 2011 at 13:36

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

Comments

matt · Accepted Answer · 2011-05-23 13:39:03Z

this part:

$("#button1").click(function(){
    alert('test');
});

is attaching the click handler to any existing dom elements with the Id button1 when the script is first run. Since that button doesn't exist until you manually click on your link1 element, you need to change how you're adding the event handler. Try using the live method from jquery to do this:

<script type="text/javascript">
    $("#link1").click(function(){
        $.post("ajax.php", { act: "load" },
        function(data) {
            $("#content").html(data);
        });
    });

    $("#button1").live('click', function(){
        alert('test');
    });
</script>

This will attach the event handler to any matching elements as soon as they become "live" in the document. More here: http://api.jquery.com/live/

Chad Ruppert · Accepted Answer · 2011-05-23 13:37:21Z

0

You are registering the click event for any buttons that are currently on page. By the time your link has been clicked, its already been registered.

Use the live event as mentioned by Richard D. That sets the event for any buttons that ever match the id you are using as your selector.

answered May 23, 2011 at 13:37

Chad Ruppert

3,6711 gold badge21 silver badges19 bronze badges

Collectives™ on Stack Overflow

JQuery - button from ajax

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related