從網頁上的php調用的html和div添加的jQuery函數無法正常工作

Question

我在有一個按鈕的div上遇到問題.Button具有id ='delsts'並且整個div是從php提取的，如下代碼：-

 //php code 
 foreach ($data as $row) {
          $status = $row['status'];
        $fn = $row['firstname'];
        $time =$row['posted_dt'];
        echo "<div id='stsshown'>
                <div class='upropic'></div>
                <span class='uname'><a href='#'>".ucfirst($fn)."</a></span>
                <span class='postdt'>".$time."</span><form action='#'><input type='button' value='x' id='delsts' title='remove from timeline' name='delsts'></form>
                <div id='detailbox'>
                asdasd
                </div>
        <div class='stsbox'>".$status."</div></div>";
    }

而下面的jQuery函數是直接從html（不是php）添加的

   //Jquery code
<script type="text/javascript">
   $(document).ready(function(){
    $(document).on('click','#delsts',function(){
            $('#detailbox').slideToggle('fast');

 });
</script>

現在，根據我的php代碼，我首先獲取了一些數據，所以一切都很好，我在網頁上得到了大約五個div（因為我在與該div相關的數據庫中有五個數據）現在，第二個jQuery代碼正在處理onclick事件函數現在，主要問題是當我單擊任意五個div的按鈕時，我的jquery函數僅對其他div中的第一個div有效，為什么？如何使每個div都可以在相同的jquery onclick事件中工作單獨運行？

Answer 1

請勿對多個元素使用具有相同值的id。 對於所有元素，請使用類選擇器。

HTML示例：

<div class='stsshown'>
    <div class='upropic'></div>
    <span class='uname'><a href='#'>username</a></span>
    <span class='postdt'></span><form action='#'><input type='button' value='x' class='delsts' title='remove from timeline' name='delsts'></form>
    <div class='detailbox' style="display:block;">
        test
    </div>
    <div class='stsbox'></div>
</div>

JS：

$(document).ready(function(){
    $('.delsts').on('click', function(){
        $(this).closest('.stsshown').find('.detailbox').slideToggle('fast');
    });
});

此示例可用於生成要實現的多組元素。

Answer 2

文檔中只能有1個具有相同名稱的id元素，但是您會在循環中生成更多的id元素。

使用類代替ID，或為每個項目分配唯一的ID。

將您的jquery代碼更改為：

<script type="text/javascript">
   $(document).ready(function(){
    $(".delsts").click(function(){
            $(this).next(".detailbox").slideToggle('fast');
    });

 });
</script>

和PHP：

 foreach ($data as $row) {
          $status = $row['status'];
        $fn = $row['firstname'];
        $time =$row['posted_dt'];
        echo "<div class='stsshown'>
                <div class='upropic'></div>
                <span class='uname'><a href='#'>".ucfirst($fn)."</a></span>
                <span class='postdt'>".$time."</span><form action='#'><input type='button' value='x' class='delsts' title='remove from timeline' name='delsts'></form>
                <div class='detailbox'>
                asdasd
                </div>
        <div class='stsbox'>".$status."</div></div>";
    }