我有一个数据列表，列表中有点击展开效果。由于这个数据列表用到了ajax加载，就是ajax加载之后的click时间不起作用了，希望各位大神帮忙看看。
这是html中的数据结构和页面布局
<code><div class="con-list">
<div class="list-data">
<div class="list-data-detail">
<p class="no-open">消费者的信息会逐渐增多，如果有一个厂家，用更好的原料和工艺，就会迅速占领市场<p>
<p><span>时间：2016-05-24</span> | <span>来源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1603">展开</a></p>
</div>
<div class="list-data-detail">
<p class="no-open">消费者的信息会逐渐增多，如果有一个厂家，用更好的原料和工艺，就会迅速占领市场<p>
<p><span>时间：2016-05-24</span> | <span>来源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1621">展开</a></p>
</div>
<div class="list-data-detail">
<p class="no-open">消费者的信息会逐渐增多，如果有一个厂家，用更好的原料和工艺，就会迅速占领市场<p>
<p><span>时间：2016-05-24</span> | <span>来源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1625">展开</a></p>
</div>
<div class="list-data-detail">
<p class="no-open">消费者的信息会逐渐增多，如果有一个厂家，用更好的原料和工艺，就会迅速占领市场<p>
<p><span>时间：2016-05-24</span> | <span>来源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1633">展开</a></p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/ai/1937">
<img src="https://img.php.cn/upload/ai_manual/001/246/273/68b6d4855a9ab930.png" alt="PatentPal专利申请写作">
</a>
<div class="aritcle_card_info">
<a href="/ai/1937">PatentPal专利申请写作</a>
<p>AI软件来为专利申请自动生成内容</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="PatentPal专利申请写作">
<span>13</span>
</div>
</div>
<a href="/ai/1937" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="PatentPal专利申请写作">
</a>
</div>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p>
</div>
</div>
<div class="list-data html-hide"></div>
</div></code>js中的展开click事件和ajax请求如下
<code><script>
;(function($){
//打开
$('.open-detail').click(function(){
$(this).parent().siblings('p[class="no-open"]').addClass('yes-open');
$(this).text('收起');
$(this).attr('class', 'close-detail');
});
//收起
$('.close-detail').click(function(){
$(this).parent().siblings('p[class="yes-open"]').addClass('no-open');
$(this).text('展开');
$(this).attr('class', 'open-detail');
});
//
});
function getAjaxList(_v, _c, _t){
$.ajax({
url : './ajax.php?op='+_v,
type : 'post',
dataType : 'json',
data : {'category':_c, 'template':_t},
success : function(msg){
if(msg.status == 1){
$('.html-hide').html(msg.html);
$('.html-hide').siblings('div').hide();
$('.html-hide').show();
} else {
$('.list-data').html('此处无您要的信息，到最新动态去看看吧');
}
}
});
}
</script></code>php中的div设置及数据设置
<code><?php
...
...
...
foreach ($variable as $key => $value) {
$html .='<div class="list-data-detail">';
$html .='<p class="no-open">'.$value['desc'].'<p>';
$html .='<p><span>时间：'.date('Y-m-d', $value['updateTime']).'</span> | <span>来源：'.$value['author'].'</span> <a href="javascript:(0)" class="open-detail" data-id="'.$value['aid'].'">展开</a></p>';
$html .='</div>';
}
$result['html'] = $html;
exit(json_encode($result));</code>我在php中div中的样式都加了啊！可就是不行。
我有一个数据列表，列表中有点击展开效果。由于这个数据列表用到了ajax加载，就是ajax加载之后的click时间不起作用了，希望各位大神帮忙看看。
这是html中的数据结构和页面布局
<code><div class="con-list">
<div class="list-data">
<div class="list-data-detail">
<p class="no-open">消费者的信息会逐渐增多，如果有一个厂家，用更好的原料和工艺，就会迅速占领市场<p>
<p><span>时间：2016-05-24</span> | <span>来源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1603">展开</a></p>
</div>
<div class="list-data-detail">
<p class="no-open">消费者的信息会逐渐增多，如果有一个厂家，用更好的原料和工艺，就会迅速占领市场<p>
<p><span>时间：2016-05-24</span> | <span>来源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1621">展开</a></p>
</div>
<div class="list-data-detail">
<p class="no-open">消费者的信息会逐渐增多，如果有一个厂家，用更好的原料和工艺，就会迅速占领市场<p>
<p><span>时间：2016-05-24</span> | <span>来源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1625">展开</a></p>
</div>
<div class="list-data-detail">
<p class="no-open">消费者的信息会逐渐增多，如果有一个厂家，用更好的原料和工艺，就会迅速占领市场<p>
<p><span>时间：2016-05-24</span> | <span>来源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1633">展开</a></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p>
</div>
</div>
<div class="list-data html-hide"></div>
</div></code>js中的展开click事件和ajax请求如下
<code><script>
;(function($){
//打开
$('.open-detail').click(function(){
$(this).parent().siblings('p[class="no-open"]').addClass('yes-open');
$(this).text('收起');
$(this).attr('class', 'close-detail');
});
//收起
$('.close-detail').click(function(){
$(this).parent().siblings('p[class="yes-open"]').addClass('no-open');
$(this).text('展开');
$(this).attr('class', 'open-detail');
});
//
});
function getAjaxList(_v, _c, _t){
$.ajax({
url : './ajax.php?op='+_v,
type : 'post',
dataType : 'json',
data : {'category':_c, 'template':_t},
success : function(msg){
if(msg.status == 1){
$('.html-hide').html(msg.html);
$('.html-hide').siblings('div').hide();
$('.html-hide').show();
} else {
$('.list-data').html('此处无您要的信息，到最新动态去看看吧');
}
}
});
}
</script></code>php中的div设置及数据设置
<code><?php
...
...
...
foreach ($variable as $key => $value) {
$html .='<div class="list-data-detail">';
$html .='<p class="no-open">'.$value['desc'].'<p>';
$html .='<p><span>时间：'.date('Y-m-d', $value['updateTime']).'</span> | <span>来源：'.$value['author'].'</span> <a href="javascript:(0)" class="open-detail" data-id="'.$value['aid'].'">展开</a></p>';
$html .='</div>';
}
$result['html'] = $html;
exit(json_encode($result));</code>我在php中div中的样式都加了啊！可就是不行。
谢谢邀请。我之前也遇到这种类似的问题，也是ajax()加载完的数据导致原来加的效果失效。如下是我的处理方式
<code>// 初始化数据的时候我也是这么写的
$('.message-but').click(function(){
// code...
});
// ajax加载后click事件不执行，又改成这样
$('.message-but').live("click",function(){
// code...
});</code>之后通过网上查询才知道这个live()其实和bind()差不多一样用，都是可以给未来元素绑定对应的触发事件，但是二者还是有区别的。两者你都试试看，希望对你有帮助
在jquery1.9+之后就没有live方法了
jQuery1.9之前的版本我们可以这样写：
<code>$("a").live("focus",function(){
this.blur();
});
</code>jQuery1.9之后由于live被删除了，所以应该这样写：
<code>$(document).on("focus","a",function(){
this.blur();
});
</code>
我大致看了一下，如果你的每个list-data-detail都是通过Ajax动态加载出来的，那么你开始直接写的click事件是无法起作用的，以为你的事件绑定的时候这个DOM并不存在。
这时候，你需要使用事件委托，在jQuery里，也就是
<code class="js">$('.list-data').on('click', '.open-detail', function() {
/// here goes the code
});</code>这样就行了。通过事件委托，将子元素的事件绑定到父元素上，子元素被点击之后，事件会冒泡到父元素，由父元素负责捕捉然后触发事件。
动态加载的元素要执行点击可以这样
<code>$(document).on('click','.message-but',function(){
// code...
});</code>
java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
566
