function in jquery where one class have multiple elements dynamicaly generated

Question

I have search the previous question but couldn't find the answer.

Dynamically generated html:

<a class="finddiv" id="#div_0">date1</a>
<a class="finddiv" id="#div_1">date1</a>
<a class="finddiv" id="#div_2">date1</a>

hidden div which i have to open- on cllick of above link:

<div id="div_0" style="display:none;"></div>

<div id="div_1" style="display:none;"></div>

<div id="div_2" style="display:none;"></div>

I want to open the div with id div_o by clicking of anchor tag with class name find, I am using the following jquery:

$(document).ready(function() {
    $('a.find').delegate(this, 'click', function() {
        var ids = $(this).attr('id');
        $(ids).slideToggle();
        return false;
    });
    return false;
});

But above function is running as many time as the number of elements in the class "find". In above case 3 times. I just want to run the function once. I have also used "one", "live" properties in jquery but nothing has happened. Since the content is dynamic I can not use the id attribute to call jquery function.

By the way the classname `find` does not exist in the example above. Did you mean to use the `finddiv`? — David Laberge, Dec 08 '11 at 14:47
@user972809: Check out http://jsbeautifier.org. Quick easy way to clean up your JavaScript formatting. — RightSaidFred, Dec 08 '11 at 14:48
By 'Dynamically generated' do you mean client-side or server-side? — Phil Peace, Dec 08 '11 at 15:12
THank You to everyone for giving such a wonderful support,the problem rather sillyness was of me that my script function was under a foreach loop that;s why it was running multiple times — Sumit Neema, Dec 09 '11 at 07:59

Andy E · Accepted Answer · 2011-12-08T15:16:56.910

1

You have your delegate mixed up:

$(document).delegate('a.finddiv', 'click', function(){
    $(this.id).slideToggle();
    return false;
});

Demo: http://jsfiddle.net/AndyE/AZCky/

Attaching like this also means you don't need to place it inside $(document).ready().

edited Dec 08 '11 at 15:16

answered Dec 08 '11 at 14:53

Andy E

338,112
86
474
445

still multiple times please help me – Sumit Neema Dec 08 '11 at 15:04
1

@user972809: AndyE and the rest of the people here won't be able to be much help if you don't show the code that is causing your issue. – RightSaidFred Dec 08 '11 at 15:06
@user972809: it [works for me](http://jsfiddle.net/AndyE/AZCky/). Did you make any changes to the code when you posted it to Stack Overflow? – Andy E Dec 08 '11 at 15:17

gen_Eric · Answer 2 · 2011-12-08T14:53:15.403

0

You don't need to use delegate here, a simple .click will work just fine.

$(document).ready(function(){
    $('a.finddiv').click(function(){
        var ids = $(this).attr('id');
        $(ids).slideToggle();
        return false;
    });
});

Demo: http://jsfiddle.net/djweQ/

You only need to use .delegate if the elements are added to the DOM at a later point. Try it like this (you can change 'body' if you want, as long as it's a parent of the <a> tags):

$('body').delegate('a.finddiv', 'click', function() {
    var ids = $(this).attr('id');
    $(ids).slideToggle();
    return false;
});

edited Dec 08 '11 at 14:53

answered Dec 08 '11 at 14:46

gen_Eric

223,194
41
299
337

1

He said the `` elements were dynamically generated, so delegation *is* necessary. – Andy E Dec 08 '11 at 14:48
@user972809: How is that possible? In the demo I posted it runs once. You sure you aren't binding it multiple times? – gen_Eric Dec 08 '11 at 14:54

score 0 · Answer 3 · answered Dec 08 '11 at 14:47

In your markup the class name is not find but it is finddiv so you should use finddiv in the javascript code to find the anchor element. Also the way you are using delegate is wrong. Since the anchor elements are generated dynamically you should have a delegate on the document object. Try this.

$(document).ready(function(){
        $(document).delegate('a.finddiv', 'click', function(){
           var ids = $(this).attr('id');
           $(ids).slideToggle();
           return false;
        });
});

As a side note. Instead of using id as attribute in the anchor element to maintain the id of the div to slide toggle you can use href attribute and get the href attribute inside click handler.

yes i have used finddiv but it is running three times means for every element in that class the function is running i just want to call it for the current cliked element in the class — Sumit Neema, Dec 08 '11 at 14:53

score 0 · Answer 4 · answered Dec 08 '11 at 14:51

Try this:

$("body").delegate(".finddiv", "click", function(e) {
    e.preventDefault();
    $($(this).attr('id')).slideToggle();
});

If your .finddiv elements have a direct parent into which they are dynamically apended, use the selector for that instead of body as you will get much better performance.

score 0 · Answer 5 · answered Dec 08 '11 at 15:02

First of all your initial mark-up has what appears to be duplicate id's. The id attribute has to be unique. What I'd suggest would be to use the following:

<!---------dynamicaly generated html------------>
<a class="finddiv" id="a_0">
date1
</a>
<a class="finddiv" id="a_1">
date1
</a>
<a class="finddiv" id="a_2">
date1
</a>

<!---------hidden div which i have to open- on cllick of above link----->
<div id="a_0_div" style="display:none;">  
</div>
<div id="a_1_div" style="display:none;">
</div>
<div id="a_2_div" style="display:none;">
</div>

And then:

$(document).ready(function(){
    $('a.finddiv').click(function(event) {
        var divId = $(this).attr('id') + '_div';
        $(divId).slideToggle();
        event.preventDefault();
    });
});

As an alternative, each <a> tag doesn't need an id attribute, you could use:

<!---------dynamicaly generated html------------>
<a class="finddiv" data-open="div0">
date1
</a>
<a class="finddiv" data-open="div1">
date1
</a>
<a class="finddiv" data-open="div2">
date1
</a>

<!---------hidden div which i have to open- on cllick of above link----->
<div id="div0" style="display:none;">  
</div>
<div id="div1" style="display:none;">
</div>
<div id="div2" style="display:none;">
</div>

and

$(document).ready(function(){
    $('a.finddiv').click(function(event) {
        $($(this).data('open')).slideToggle();
        event.preventDefault();
    });
});

Though this will only work in JQuery 1.7 onwards

The `id` attributes on the `` elements aren't duplicates, because they're prefixed with *#*. This also means that your code won't work, because you're not prefixing the ID selector lookups with *#*. — Andy E, Dec 08 '11 at 15:13
But the `#` character isn't valid in `id` atttibutes (http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) — Phil Peace, Dec 08 '11 at 15:20
I stand corrected - HTML5 specifies only [non-space characters](http://www.w3.org/TR/html5/elements.html#the-id-attribute) — Phil Peace, Dec 08 '11 at 15:22
correct, and browsers have always allowed this behaviour for `id` attributes — HTML5 just makes it official :-) — Andy E, Dec 08 '11 at 15:29

score -1 · Answer 6 · edited Dec 08 '11 at 17:35

-1

$('.finddiv').click(function(){

  $($(this.attr('id')).show());

});

edited Dec 08 '11 at 17:35

shodanex

14,975
11
57
91

answered Dec 08 '11 at 14:46

Lee

10,496
4
37
45

function in jquery where one class have multiple elements dynamicaly generated

6 Answers6