Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

JQuery, setInterval and handler on event click in DOM-element, coming from APPEND?

jQuery jquery element

  • Please log in to reply
6 replies to this topic

#1 Stasonix

Stasonix

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 115 posts
  • Programming Language:C++, PHP, JavaScript, Delphi/Object Pascal, Pascal
  • Learning:C++, PHP, JavaScript, Delphi/Object Pascal

Posted 07 July 2011 - 12:51 PM

How to make that label with id='lab' was clickable, watch listing, you'll all understand:

better way to watch it to run on fiddle: Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

or
<div id='content'>
 history begin<br/>
</div>

window.setInterval(function(){

$('#content').append(" <label id='lab'>pls make it clickable<br/></label>");

},3000);



$('#lab').click(function(){

alert("ok!");

});

#content{
width: 200px;
height: 200px;
border: 2px groove red;
background-color: blue;
color: white;
}

css for looking better what happen in div
  • 0

#2 Revolt

Revolt

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 100 posts

Posted 07 July 2011 - 02:00 PM

First of all, for multiple elements with the same value, you should use the class property not the id.
Secondly, in that situation a <label> doesn't make much sense since there is no input field to associate that label with. Did you mean <span>?

Regarding your problem, it occurs because at the beggining, when the $('.lab').click =... code is run there are no elements with class 'lab' so nothing is done. What you really ought to be doing is setting the click after adding a new element like I've done here:

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)
  • 0

#3 BlaineSch

BlaineSch

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1559 posts

Posted 12 July 2011 - 09:41 AM

First of all, for multiple elements with the same value, you should use the class property not the id.
Secondly, in that situation a <label> doesn't make much sense since there is no input field to associate that label with. Did you mean <span>?

Regarding your problem, it occurs because at the beggining, when the $('.lab').click =... code is run there are no elements with class 'lab' so nothing is done. What you really ought to be doing is setting the click after adding a new element like I've done here:

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)


Your method is NOT a good way to do it. If you assign a click event to an item more than once, it does not overwrite it. So after it loads a few of those span's, click the first one and you get a ton of alert boxes which causes lots of excess events to be triggered.

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

The jsFiddle is a nice resource, I'll bookmark that.
  • 0

#4 Revolt

Revolt

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 100 posts

Posted 12 July 2011 - 02:02 PM

I apologize for that then. I didn't test the solution extensively nor did I know about that particular detail. Thanks!
  • 0

#5 BlaineSch

BlaineSch

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1559 posts

Posted 12 July 2011 - 02:06 PM

No worries. The day we stop learning, is the day we cease to exist. :)

Also, welcome to the forums!
  • 0

#6 Revolt

Revolt

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 100 posts

Posted 13 July 2011 - 03:06 AM

This "feature" is specific to jquery right? The accumulation of handlers instead of their replacement. It would explain why I had never heard of that :P

And thanks!
  • 0

#7 BlaineSch

BlaineSch

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1559 posts

Posted 13 July 2011 - 10:37 AM

Most of the time, it will add more events. There is a great need for this, say for instance you have a site that has a few plugins to make an application work, each one needs to start when the dom is ready.

So each one is calling .bind('ready') by themselves, and we really don't want this to overwrite the other ones that are also calling it, which will cause those plug-ins not to work.

Basic JavaScript uses "addEventListener" which does the same thing, since each one is listening for the event, it won't over write the old one.

A few core ones will overwrite previous instances though, such as "window.onload" since that's more of a variable that gets executed.
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download