从网页上的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>";
    }