jQuery: Div interchange with jQuery

Question

There is a button on a page with value "button1". When pressed, it must delete itself and add new button with value "button2". When "button2" is pressed, it must delete itself and add "button1" back. Kinda infinite loop.

I know that it can be done just by changing the value of a button or at least using "detach()" function, but it is the simplest case of my problem in a website that I'm currently trying to implement where I must interchange two "div"s full of data by buttons.

So, back to the problem, the thing is while "button1" works fine, "button2" does nothing. A bit of help will be appreciated.

index.html

<!DOCTYPE html>
<html>

    <head>
        <script src = "http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src = "script.js" type = "text/javascript"></script>
    </head>


    <body>
        <div id = "div1">
            <input type = button id = "button1" value = "button1" />
        </div>
    </body>

</html>

script.js

$(document).ready (function() {
    $("#button1").click (function() {
        $("body").append ("<div id = 'div2'></div>");
        $("#div2").append ("<input type = button id = 'button2' value = 'button2' />");
        $("#div1").remove();
    });

    $("#button2").click (function() {
        $("body").append ("<div id = 'div1'></div>");
        $("#div1").append ("<input type = button id = 'button1' value = 'button1' />");
        $("#div2").remove();
    });

});

score 2 · Accepted Answer · answered Jun 20 '13 at 13:42

2

#button2 is not responding to the click because it is non-existent at the time of binding the click() event.

You can solve this by binding with .on()

$(document).on('click', '#button1', function() {
    ....
});

$(document).on('click', '#button2', function() {
    ....
});

answered Jun 20 '13 at 13:42

techfoobar

65,616
14
114
135

thanks, i've started to learn recently, pretty easy to fall on such silly mistakes – Kudayar Pirimbaev Jun 20 '13 at 13:47

score 1 · Answer 2 · answered Jun 20 '13 at 13:43

Change to use .on since elements are being dynamically added:

$(document).on("click", "#button1", function() {
    $("body").append ("<div id = 'div2'></div>");
    $("#div2").append ("<input type = button id = 'button2' value = 'button2' />");
    $("#div1").remove();
});

$(document).on("click", "#button2", function() {
    $("body").append ("<div id = 'div1'></div>");
    $("#div1").append ("<input type = button id = 'button1' value = 'button1' />");
    $("#div2").remove();
});

score 1 · Answer 3 · answered Jun 20 '13 at 13:44

You are trying to attach a click handler to an element that doesn't exist initially, and it won't get attached to your dynamically created element.

Try using the on() jQuery function, or in earlier jQuery versions, the live() function, like this:

$(document).on("click", "#button1", function() {
    (...)
});

$(document).on("click", "#button2", function() {
    (...)
});

score 1 · Answer 4 · edited May 23 '17 at 10:25

1

You will need to use the .on jQuery function. Since you are creating the div via JavaScript and it isn't already in the DOM.

Same as here: https://stackoverflow.com/a/1207393/1165441

.live is deprecated so you can ignore unless you are using an older version of jQuery.

edited May 23 '17 at 10:25

Community

1
1

answered Jun 20 '13 at 13:46

edhedges

2,722
2
28
61

score 1 · Answer 5 · answered Jun 20 '13 at 13:50

When manipulating the DOM the event handlers that are attached to your buttons are not attached again. You have a similar problem after the page loads - button2 does not exist and there is no click event for it.

If you regenerate the events after DOM manipulation it will work:

function set_events() {
    $("#button1").click (function() {
        $("body").append ("<div id = 'div2'></div>");
        $("#div2").append ("<input type = button id = 'button2' value = 'button2' />");
        $("#div1").remove();
        set_events();
    });

    $("#button2").click (function() {
        $("body").append ("<div id = 'div1'></div>");
        $("#div1").append ("<input type = button id = 'button1' value = 'button1' />");
        $("#div2").remove();
        set_events();
    });
}

$(document).ready (function() {
    set_events();
});

jQuery: Div interchange with jQuery

5 Answers5