JQuery Changing Content

[kigogu]

I'm trying to change content with jquery by changing the content of a div id. Basically what I want to do is when a user clicks on a button, it will change the content and display a new button, then when they click on the new button it will display different content. essentially this will be like a three page website if this were all to work.

 

so far I have:

$(document).ready(function() {

$("#1").click(function() {
$("#leftPart").html('<input type="button" name="submit" id="2" value="Submit" />');
$("#rightPart").html('');
});

$("#2").click(function() {
$("#rightPart").html('<input type="text" id="new_world" value="new_world" name="new_world" >');
});
});

 

In the HTML it will already have a button with an id = 1, so once you click on that it displays the second submit button in the leftPart div, but when you click on the second submit button (id = 2, in the jquery) it doesn't change anything. I'm completely new to jquery, so i could definitely use some help on this.

[kigogu]

NVM! I got the answer, since the second button was created dynamically, it wasn't being registered, so if i just use on instead of click then it works perfectly, here is the new code:

$(document).ready(function() {

$(document).on("click", "#1", function() {
$("#leftPart").html('<input type="button" name="submit" id="2" value="Submit" />');
$("#rightPart").html('');
});

$(document).on("click", "#2", function() {
$("#rightPart").html('<input type="text" id="new_world" value="new_world" name="new_world" >');
});
});