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 。