功能，其中一個類有多個元素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起