6 replies to this topic

[Stasonix]

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

[Revolt]

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)

[BlaineSch]

Revolt said:

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.

[Revolt]

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

[BlaineSch]

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

Also, welcome to the forums!

[Revolt]

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!

[BlaineSch]

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.