功能，其中一个类有多个元素dynamicaly产生

Question

我有搜索前一个问题，但无法找到答案。

动态生成的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> 

隐藏的div我已经给开在上面的链接的cllick：

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

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

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

我希望通过单击锚标记的div与iddiv_o打开与类名find，我使用以下的jQuery：

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

但上面的函数运行尽可能多的时间，在课堂上“发现”元素的数量。 以上情况3次。我只想运行一次该功能。我也用jQuery中的“one”，“live” 属性，但没有发生任何事情。由于内容是动态的，我不能使用id属性来调用jquery函数。

Answer 1

你有你的delegate混合起来：

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

演示：http://jsfiddle.net/AndyE/AZCky/

附加这样也意味着你不需要把它里面$(document).ready()。

Answer 2

你不需要在这里使用delegate，一个简单的.click会工作得很好。

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

演示：http://jsfiddle.net/djweQ/

你只需要使用.delegate如果这些元素均在稍后添加到DOM。尝试像这样（你可以改变'body'如果你想，只要它是<a>标签的父）：

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

Answer 3

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

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

}); 

Answer 4

在您的标记中的类名称不是find但它是finddiv所以你应该在JavaScript代码中使用finddiv来查找锚元素。你使用委托的方式也是错误的。由于锚元素是动态生成的，因此您应该在文档对象上有一个委托。尝试这个。

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

作为一个侧面说明。而不是在锚元素使用id作为属性保持的div id来滑动切换按钮，你可以使用href属性和进去click处理程序href属性。

Answer 5

试试这个：

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

如果您.finddiv元素有直接的父，他们是动态apended成，使用选择为替代body，你将得到更好的性能。

Answer 6

所有您最初的加价首先有什么似乎是重复id的。 id属性必须是唯一的。什么我建议是使用以下：

<!---------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> 

然后：

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

作为替代，每个<a>标签并不需要一个id属性，你可以使用：

<!---------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> 

和

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

虽然这只会在JQuery的1.7起