jquery: two click function

Question

why i click on "close" div, don't show "basic text"? in short, why don't work second "click" function?

<!DOCTYPE html>
    <html>
    <head>  
        <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $("#sp").click(function(){
                $("#info").html("<div><div id='close'>Close</div><div>new text</div></div>");
            });

            $("#close").click(function(){
                $("#info").html("<div>basic text</div>");
            });
        });
        </script>
        <style>
        </style>
    </head>
    <body>
    <p id="sp">Click</p>
    <div id="info">
        <div>basic text</div>
    </div>
    </body>
    </html>

polarblau · Accepted Answer · 2011-01-19 16:16:27Z

3

You will need the live() function for this:

$("#sp").click(function(){
    $("#info").html("<div><div id='close'>Close</div><div>new text</div></div>");
});

$("#close").live('click', function(){
    $("#info").html("<div>basic text</div>");
});

Your element with the id closed is created after the click event handler has been attached (to nothing in this case). You'll need to ensure that it will be also attached to dynamically created elements. And for this you can use live()

answered Jan 19, 2011 at 16:16

polarblau

17.8k8 gold badges66 silver badges84 bronze badges

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

Comments

Brandon · Accepted Answer · 2011-01-19 16:17:40Z

0

Because close doesn't exist when the click is set. Use the live function instead.

$("#close").live("click", function(){
  $("#info").html("<div>basic text</div>");
});

answered Jan 19, 2011 at 16:17

Brandon

70.3k32 gold badges201 silver badges227 bronze badges

Comments

David Thomas · Accepted Answer · 2011-01-19 16:17:59Z

0

Because the close element is added dynamically, and not present in the DOM on page-load.

If you amend the code a little, to:

$("#close").live('click',
    function(){
        $("#info").html("<div>basic text</div>");
});

It should work fine.

live() allows events to be bound to elements not-yet created/present in the DOM.

answered Jan 19, 2011 at 16:17

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Comments

user113716 · Accepted Answer · 2011-01-19 16:23:31Z

Events bubble, so you could just place a handler directly on info that looks for click on elements with the ID close.

$(document).ready(function(){
    $("#sp").click(function(){
        $("#info").html("<div><div id='close'>Close</div><div>new text</div></div>");
    });

    $("#info").click(function(e){
        if( e.target.id === "close" ) {
            $(this).html("<div>basic text</div>");
        }
    });
});

As an alternative, you could use delegate()^(docs), which does essentially the same thing.

$(document).ready(function(){
    $("#sp").click(function(){
        $("#info").html("<div><div id='close'>Close</div><div>new text</div></div>");
    });

    $("#info").delegate('#close','click',function(e){
        $(this).parent().html("<div>basic text</div>");
    });
});

Ultimately the best solution would be to have all the markup on the page when it loads, and just show()^(docs) and hide()^(docs) it as necessary. This is much better than destroying and recreating reusable content.

Collectives™ on Stack Overflow

jquery: two click function

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