CODEWITHSUNDEEP
jqueryhtml
user1399078
user1399078

Reputation: 175

JQuery Changing Content

I'm trying to have JQuery change the content of div tags so that it makes it look like the user is going through multiple pages. The way I have it is that the user will hit a button, once they hit the button a script will run and change the content of divs. I wanted to have at least three pages to be done like this, but I run in to a problem after the second page. Here is what I have in the script:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function() {

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

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

So once I click on the button on the first page, with an id of '1', then it changes the screen to what the second page should show. The second page will display some stuff and create another button with the id of '2'. When I then try to click on the button from the second page, with an id of '2', it doesn't do anything. Any help? Is it because the button is created with the script instead of actually being in the html?

Upvotes: -1

Views: 269

Answers (5)

wirey00
wirey00

Reputation: 33661

It's because you are creating the button dynamically. You need to use the .on() to delegate the click event. #2 button is not created when dom is ready and that's why it's not working. 'body' can be substituted with any parent element of the selected button. Also you shouldn't be using numbers as ID's as they are not valid

$('body').on('click','#2',function(){

Upvotes: 0

Viezevingertjes
Viezevingertjes

Reputation: 1567

That is because the button with id="2" is made after binding to the click event, this new button is not detected unless you re-bind the click event. A better option would be to use on() intead of click() this will do this automaticly.

$(document).ready(function() { 

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

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

});

Upvotes: 1

Rune FS
Rune FS

Reputation: 21742

You are right it's because it's created dynamically. you can use .on to avoid this issue

change you code:

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

to

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

that will ensure that any element in leftPart with the id 2 now and in the future will have the above event handler

Upvotes: 0

Playmaker
Playmaker

Reputation: 1456

Yes. This is because the button '2' is not present in the DOM at the time the event is attached to the web-page.

Try using

You can also refer ' Event binding on dynamically created elements? ' for more.

Upvotes: 0

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13461

change this

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

to

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

Numeric values are not valid id's, use a valid id.

Upvotes: 0

Related Questions