3 Replies - 2141 Views - Last Post: 22 March 2014 - 07:41 AM

#1 kadii   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 22-July 13

not working after score=3

Posted 22 March 2014 - 02:38 AM

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

});



Is This A Good Question/Topic? 0
  • +

Replies To: not working after score=3

#2 ge∅   User is offline

  • D.I.C Lover

Reputation: 195
  • View blog
  • Posts: 1,194
  • Joined: 21-November 13

Re: not working after score=3

Posted 22 March 2014 - 04:03 AM

This behaviour is normal.

When you use the click() method, you bind an event to the #one, #two and #three elements. When you replace them, you destroy the element your event is bound to, and you replace it with a brand new element.

There are multiple workarounds : you can bind another click event to the new element (bad), you can use the on() method instead of click() (bad), and you can replace only the text node inside of your button element instead of the whole element.


If I can give you a general advice : try to learn raw Javascript before playing with jQuery. You don't know what your script is doing (it's the reason why your are stuck here) and jQuery gives you really bat programming habits. Keep in mind that the code you see in the jQuery documentation or in jQuery tutorials is meant to be simple so you can concentrate on what you are learning, but it doesn't show the best practices.

First of all, your answers ("cat", "rat", etc.) are completely lost in your code. You should really place them in an array called "answers" or something like that at the top of your script. It is far easier to maintain and the answer's index in the array can mirror your data-index attribute, which can be handy.

Then, you are binding two event on every button and you use the id attribute to select your elements : again, this is harder to maintain. Every time you want to add a button, you will need to bind another event manually and to update your jQuery selector in your main click() call. You don't need id attributes here, just select the button elements and use your data-index attribute to select the right answer in your array.

Finally, it seems like you want to do multiple turns with the same index variable, but again : it is not visible in you script's architecture. You should implement a layer of code that takes care of the turns and another layer of code that checks the user's input and increments the score in each turn.
Was This Post Helpful? 0
  • +
  • -

#3 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4245
  • View blog
  • Posts: 13,452
  • Joined: 08-June 10

Re: not working after score=3

Posted 22 March 2014 - 05:24 AM

View Postge∅, on 22 March 2014 - 12:03 PM, said:

and jQuery gives you really bat programming habits.

canít agree to this particular statement. from an application design point-of-view jQuery has an excellent design. and if used properly (!) you can develop many goot programming habits. or in other words, you canít blame a library for using a core language feature (like functional programming here).

what I can agree to is that if you donít know why jQuery is built the way it is, you use it in the wrong way, which then is indeed a bat programming habit.
Was This Post Helpful? 0
  • +
  • -

#4 ge∅   User is offline

  • D.I.C Lover

Reputation: 195
  • View blog
  • Posts: 1,194
  • Joined: 21-November 13

Re: not working after score=3

Posted 22 March 2014 - 07:41 AM

If you use jQuery you become a bat man.

This post has been edited by ge∅: 22 March 2014 - 07:43 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1