从网页上的php调用的html和div添加的Jquery函数无法正常工作

问题描述：

I'm having problem with a div which has a button on it.Button has id='delsts' and that whole div is fetched from php like below code:-

 //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>";
    }

And this below jquery function is directly added from html(not php)

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

 });
</script>

Now, according to my php code I have fetched some data first so, everything is fine there I get some five div on my webpage (as I have five data on database related to that div).Now secondly jquery code is handling onclick event function on id 'delsts' of those five div.Now the main problem is that when I click those button of any five div my jquery function works for only first div out of other div why?how can we make every div work same jquery onclick event function individually?

我遇到一个div上有一个按钮的问题。按钮有id ='delsts'，那个整个div从php获取如下代码： - p>

  // php code 
 foreach（$ data as $ row）{
 $ status = $ row ['status  ']; 
 $ fn = $ row ['firstname']; 
 $ time = $ row ['posted_dt']; 
 echo“＆lt; div id ='stsshown'＆gt; 
＆lt; div class =  'upropic'＆gt;＆lt; / div＆gt; 
＆lt; span class ='uname'＆gt;＆lt; a href ='＃'＆gt;“。ucfirst（$ fn）。”＆lt; / a＆gt;＆lt; / span＆gt  ; 
＆lt; span class ='postdt'＆gt;“。$ time。”＆lt; / span＆gt;＆lt; form action ='＃'＆gt;＆lt; input type ='button'value ='x'id ='  delsts'title ='从时间轴中删除'name ='delsts'＆gt;＆lt; / form＆gt; 
＆lt; div id ='detailbox'＆gt; 
 asdasd 
＆lt; / div＆gt; 
＆lt; div class =  'stsbox'＆gt;“。$ status。”＆lt; / div＆gt;＆lt; / div＆gt;“; 
} 
  code>  pre> 
 
 以下jquery函数直接 从htm添加 l（不是php） p> 
 
 
  // Jquery code 
＆lt; script type =“text / javascript”＆gt; 
 $（document）.ready（function（）{\  n $（document）.on（'click'，'＃delsts'，function（）{
 $（'＃detailbox'）。slideToggle（'fast'）; 
 
}）; 
＆lt; / script＆gt  ; 
  code>  pre> 
 
 现在，根据我的PHP代码，我首先获取了一些数据，所以一切都很好我在网页上得到了五个div（因为我有五个 关于数据库的数据与div有关。）现在，第二个jquery代码正在处理那五个div的id'delsts'上的onclick事件函数。现在主要的问题是，当我点击任意五个div的那个按钮时，我的jquery函数只能用于 div out of other div为什么？我们怎样才能使每个div工作单独的jquery onclick事件函数？   p> 
  div>

答

Do not use id with the same value for multiple elements. Use a class selector instead for all elements.

Example 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');
    });
});

This example is usable for generation of multiple sets of elements you want to achieve.

答

There can be only 1 id element with the same name in the document, but you generate more of them in loop.

Use classes instead of IDs, or assign unique IDs for each item.

change your jquery code to:

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

 });
</script>

and 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>";
    }

从网页上的php调用的html和div添加的Jquery函数无法正常工作

相关推荐