javascript – js中ajax请求数据之后的click事件失效问题

我有一个数据列表，列表中有点击展开效果。由于这个数据列表用到了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> 展开</p>        </div>        <div class="list-data-detail">            <p class="no-open">消费者的信息会逐渐增多，如果有一个厂家，用更好的原料和工艺，就会迅速占领市场<p>            <p><span>时间：2016-05-24</span> | <span>来源：本站</span> 展开</p>        </div>        <div class="list-data-detail">            <p class="no-open">消费者的信息会逐渐增多，如果有一个厂家，用更好的原料和工艺，就会迅速占领市场<p>            <p><span>时间：2016-05-24</span> | <span>来源：本站</span> 展开</p>        </div>        <div class="list-data-detail">            <p class="no-open">消费者的信息会逐渐增多，如果有一个厂家，用更好的原料和工艺，就会迅速占领市场<p>            <p><span>时间：2016-05-24</span> | <span>来源：本站</span> 展开</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> 展开</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> 展开</p>        </div>        <div class="list-data-detail">            <p class="no-open">消费者的信息会逐渐增多，如果有一个厂家，用更好的原料和工艺，就会迅速占领市场<p>            <p><span>时间：2016-05-24</span> | <span>来源：本站</span> 展开</p>        </div>        <div class="list-data-detail">            <p class="no-open">消费者的信息会逐渐增多，如果有一个厂家，用更好的原料和工艺，就会迅速占领市场<p>            <p><span>时间：2016-05-24</span> | <span>来源：本站</span> 展开</p>        </div>        <div class="list-data-detail">            <p class="no-open">消费者的信息会逐渐增多，如果有一个厂家，用更好的原料和工艺，就会迅速占领市场<p>            <p><span>时间：2016-05-24</span> | <span>来源：本站</span> 展开</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('此处无您要的信息，到最新动态去看<i style="color:transparent">@本文来源gaodai$ma#com搞$代*码6网</i><b>搞代gaodaima码</b>看吧');                }      }  });}</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> 展开</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>

喜欢 (0)赏

[搞代码]

分享 (0)