将事件附加到ajax调用中的元素

Question

我正在尝试将一个show事件添加到一组div作为ajax响应进入，基本设置如下：

Call -> Ajax success -> append X amount of divs

div的外观如下：

<div>Content <a href="#" id="showaddcontent-1">Show additional Content</a></div>
<div class="hidden" id="hiddendiv-1">Additional content</div>

<div>Content <a href="#" id="showaddcontent-2">Show additional Content</a></div>
<div class="hidden" id="hiddendiv-2">Additional content</div>

等等。

我尝试将click功能添加到每个链接，并将show函数添加到每个div，如下所示：

$(function() {
var foreachid = 0;
$.ajax({ 
....
success: function(html){
    $('[id^="showaddcontent-"]').each(function() {
    var foreachid = foreachid + 1;
    $(document).on('click', '#showaddcontent-'+foreachid, function(){
    $( "#hiddendiv-"+foreachid ).show();
   });
});

这里似乎有什么问题？

Answer 1

以下是您需要附加事件监听器的方法：

$(function() {
     $(document).on('click', 'div[id^="showaddcontent-"]', function() {
         var foreachid = this.id.split('-').pop();
         $( "#hiddendiv-"+foreachid ).show();
    });

    $.ajax({ 
        //....
        success: function(html){
           //obtain data and append divs to DOM
        }
    });
});