[英]Jquery function which is added from html and div that has been called from php on webpage is not working properly
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:- 我在有一个按钮的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>";
}
And this below jquery function is directly added from html(not php) 而下面的jQuery函数是直接从html(不是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? 现在,根据我的php代码,我首先获取了一些数据,所以一切都很好,我在网页上得到了大约五个div(因为我在与该div相关的数据库中有五个数据)现在,第二个jQuery代码正在处理onclick事件函数现在,主要问题是当我单击任意五个div的按钮时,我的jquery函数仅对其他div中的第一个div有效,为什么?如何使每个div都可以在相同的jquery onclick事件中工作单独运行?
Do not use id with the same value for multiple elements. 请勿对多个元素使用具有相同值的id。 Use a class selector instead for all elements.
对于所有元素,请使用类选择器。
Example HTML: 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: 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. 文档中只能有1个具有相同名称的id元素,但是您会在循环中生成更多的id元素。
Use classes instead of IDs, or assign unique IDs for each item. 使用类代替ID,或为每个项目分配唯一的ID。
change your jquery code to: 将您的jquery代码更改为:
<script type="text/javascript">
$(document).ready(function(){
$(".delsts").click(function(){
$(this).next(".detailbox").slideToggle('fast');
});
});
</script>
and php: 和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>";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.