JQuery Changing Content

Question

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?

HTML doesn't allow numeric ID, you should change them, e.g. to 'page1'. — iappwebdev, Jun 12 '12 at 12:59
@Simon: HTML5 does and most browsers can handle it. Nevertheless, it's ugly somehow ;) — Felix Kling, Jun 12 '12 at 13:03
Alright, bad comment. Here again: W3C Standard HTML convention doesn't allow it: http://www.w3.org/TR/html4/types.html#type-name — iappwebdev, Jun 12 '12 at 13:06
see an extended discussion regarding the use of .click, .on, .live and .delegate with this question: http://stackoverflow.com/questions/10983244/unsure-about-on-method/10983259#comment14346496_10983259 — Mark Schultheiss, Jun 12 '12 at 13:14
well i wasn't going to actually use 1 and 2, it was just simple to write it so i can see if it worked or not lol — user1399078, Jun 12 '12 at 13:30

Viezevingertjes · Accepted Answer · 2012-06-12T13:20:24.120

1

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" >'); 
    }); 

});

edited Jun 12 '12 at 13:20

answered Jun 12 '12 at 12:59

Viezevingertjes

1,507
1
13
25

This `$("#2").on(function()` syntax of `.on` wont work for future elements, it's just like `.click`. The correct syntax is `$(Static_parent).on(event,selector,callback);`. – Prasenjit Kumar Nag Jun 12 '12 at 13:04
Works just fine, as far as i know we always use it like this. – Viezevingertjes Jun 12 '12 at 13:09
I am sorry, it will work for this case as `#2` is being added before the on call. But wont work for dynamically added elements in that case you have to use `$(document).on('click',"#2",function()` syntax. – Prasenjit Kumar Nag Jun 12 '12 at 13:11
OH! i didn't see the $(document).on('click', '#2', function() part, that definitely works ^^ thank you! – user1399078 Jun 12 '12 at 13:37

score 0 · Answer 2 · edited May 23 '17 at 12:29

0

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

.live( events, handler(eventObject) )
.on( events [, selector] [, data] , handler(eventObject) )
or delegate if you are using older version of jQuery

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

edited May 23 '17 at 12:29

Community

1
1

answered Jun 12 '12 at 12:59

Playmaker

1,458
1
14
23

.live is deprecated so you should use that – Rune FS Jun 12 '12 at 13:06
It is deprecated, so you 'SHOULD' use that? Is there a typo there? – Playmaker Jun 12 '12 at 13:16
Yeah me forgetting a n't it should ( and here I do mean should) have said shouldn't use it (because it's deprecated) – Rune FS Jun 12 '12 at 16:36
You are confusing me :P . I'll take it as a shouldn't. :) – Playmaker Jun 12 '12 at 18:10
Just for the reader that might come across this post in the future: '.on' is the replacement for '.live', so '.on' should be used when available. In some cases '.on' is not available due to an older version of jQuery, try updating whenever possible, when thats not a possibility just continue to use '.live' knowing it might break in the future when updating anyway. – Viezevingertjes Jun 13 '12 at 06:03

Rune FS · Answer 3 · 2012-06-12T13:06:00.583

0

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

edited Jun 12 '12 at 13:06

answered Jun 12 '12 at 12:59

Rune FS

21,497
7
62
96

@Joy What do you mean? I haven't written `$.on` anywhere – Rune FS Jun 12 '12 at 13:06
I meant your previous syntax `$("#leftPart").on("#2","click",function()` was not correct. It's fine now as you fixed the syntax. – Prasenjit Kumar Nag Jun 12 '12 at 13:09
@RuneFS - see an extended set of comments here about .on http://stackoverflow.com/questions/10983244/unsure-about-on-method/10983259#comment14346496_10983259 – Mark Schultheiss Jun 12 '12 at 13:12
@MarkSchultheiss not sure what you are aiming at. leftpart exist at the time that on is executed – Rune FS Jun 12 '12 at 16:38

wirey00 · Answer 4 · 2012-06-12T13:23:17.707

0

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(){

edited Jun 12 '12 at 13:23

answered Jun 12 '12 at 13:01

wirey00

33,517
7
54
65

score 0 · Answer 5 · answered Jun 12 '12 at 13:01

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.

JQuery Changing Content

5 Answers5