jQuery选择器，用于动态创建的元素

Question

我正在像这样在PHP中创建html

<?php
while(){
  ?>
 <a  id="click_to_expand-1" class="btn btn-default btn-sm "> more</a>
 <div id="expand_content-1" class="row extra-detail-gist" style="display: none;">
      <ul class="extra-feature-gist">
          <li>
           <p><strong>Baths :</strong><span class="text-success"> <?php echo $rw["baths"]; ?></span></p>
          </li>
      </ul>
<?php
}
?>

这是我的jQuery代码

$(function(){
        $('.row.extra-detail-gist').css('display','none');
        $('.btn.btn-default.btn-sm').click(function(){
            $('.row.extra-detail-gist').slideToggle('slow');
            $(this).toggleClass('slideSign');
            return false;
        });
    });

这段代码适用于所有创建的div，所有div都在点击时显示。如何区分“更多”的每次点击？

更新 ：此代码适用于第一个代码..但其余记录不起作用

$(function(){
        $('#expand_content-1').css('display','none');
        $('#click_to_expand-1').click(function(){
            $('#expand_content-1').slideToggle('slow');
            $(this).toggleClass('slideSign');
            return false;
        });
});

这是JSFIDDLE

Answer 1

尝试这个：

工作实例

$(document).on('click','.btn.btn-default.btn-sm',function(){
    $(this).parent().next('.row.extra-detail-gist').slideToggle('slow');
    $(this).toggleClass('slideSign');
    return false;
});

使用$('.row.extra-detail-gist')这row extra-detail-gist您可以选择所有具有row extra-detail-gist类的divs 。