用于动态创建元素的 Jquery 选择器 - Jquery Selector for dynamically created elements

Jquery Selector for dynamically created elements

我正在像这里一样在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

试试这个：

工作示例

$(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类的所有divs。