not working after score=3

i just used jquery replaceWith but its seems not working after score=3. the fiddle shows what is going on. please click in this order like button1, button3, button2 then the score increase by point 1 for each button but after score=3 i.e., after clicking all three buttons the score stops and does not respond. i even tried with other button ids but its not working.below is the replace id that i assigned and as the text of the button changes but not responding to score and click.

http://jsfiddle.net/Bwdfw/110/

$("#three").click(function () {
$("#three").replaceWith("<button id=\"three\" type=\"button\" data-index=\"0\" >cat</button>");

});

Code (markup):

 

The issue is you are replacing the element which the event is listening on. A solution would be to attach a .on to a parent element

$(document).on('click','#three',function() {
    $("#three").replaceWith("<button id=\"three\" type=\"button\" data-index=\"0\" >cat</button>");
});

Code (markup):

NOTE
using document is just for demonstration do not use on an actual site, instead bind the event to the first "static" element on the page ie. one that isn't added by javascript.

If you could explain the game a little more they is likely a simpler way to code than using ID's

 

i am just changing the text of the button and score should increase one point for every click based on data-index. data-index is used because to assign order for buttons.

 

Because are removing the whole button which detaches the event (so the click won't work).. using .on will make sure it keeps working but you could simply change the text of the button with

$('#one').text('new text');

HTML:

I took a guess at an example based on the information how about this

http://jsfiddle.net/Bwdfw/113/

 

hey abstract thanq for the reply, i know that

$('#one').text('new text');

Code (markup):

is used to replace text, but i want to change the data-index with text. i can give a small example about this

if button1 is given data-index=0 and button2 is given data-index=1 then after clicking on their buttons
button1 must chage to data-index=1 and button2 to data-index=0

 

to set the index value just call the .data() method like so

$('#one').data('index',1);

HTML:

where 1 is the new index

 

so i can use the code below to change both text and data-index..

$('#one').text('button1');

$('#one').data('index',1);

Code (markup):

 

i tested the above code and i think it only works once i.e., if i want to swap the text continuosly or infinite number of time on click then the above code seems not to work. i used the below code but on click its executing only the last line of code(rat). i dont know how to execute it unlimited times one after another(first click:bat---second click:cat---third click:rat---fourth click:bat---and so on in an order).

$('#one').text('bat');
$('#one').data('index',1);


$('#one').text('cat');
$('#one').data('index',1);

$('#one').text('rat');
$('#one').data('index',1);

Code (markup):

 

Add a counter, and execute the different text-nodes based on which number you're on.

 

Normally I don't poke my head into the jQ forums, but someone said "can you help this guy" so... here we go.

Well, I'm seeing a few issues with it... first off you have a bug that's pretty obvious -- surprised nobody else noticed it... it's really the root cause of your problem:

if (dataIndex == 2)

Since your valid values are 0, 1 and 2, it would NEVER be allowed to run AS two since you're resetting 2 to 0. You want >2 or ==3 there.

I'd probably write that as:

if (++index == 3) index = 0;

That said, I don't know why you're wasting time with the two extra click functions, I'd suggest using setinterval as it's more accurate (it won't skip on rollover granularity) and then clear the interval when the game is over. Naturally I'd axe the fat bloated jQuery crap that really isn't doing anything for you a dozen lines of simple library functions couldn't...

... and of course you should have graceful degradation with a noscript and really if all those markup elements are scripting only, they have no business in the markup. I know a lot of people consider that a 'clean up for later' type of thing, IMHO if you can't do it right in the first place you're just making more work for yourself.

Generating them in the markup would also mean you could pre-store their creation into variables so you aren't wasting time with getElementById every blasted timer tick, and you could set up span to nodeReplace the content instead of dicking around with innerHTML or jQuerys dumbass halfwit equivalent (You guys know we're NOT supposed to use innerHTML or document.write anymore, right? As of like... a decade ago?!? What am I saying, asking that of jQ dev's is like asking if you ever get to the cloud district...) resulting in faster/smoother content updates.

Something like... say...
http://jsfiddle.net/32TQc/3/

Tossed in a little mini-library to replace the jQ bull, and it uses the DOM instead of innerHTML to do updates how we're SUPPOSED to be doing that stuff! Also added game status text and a restart button.

Likewise, I swung an axe at the stupid malfing 'wait for onload' crap, and put it right before </body> where it belongs (and would belong even if it was in an external file)... and used .value instead of the stupid malfing HTML 5 "let's put even more crap in the markup that has no business there" 'data-' attribute crap. If you're going to abuse form elements like BUTTON outside a form for scripttardery (that really should be an anchor) you might as well leverage it's existing attributes.

That's about what you were trying to do, right?