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.

Answer 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().