javascript - click event failure problem after ajax request data in js

I have a data list with a click-to-expand effect. Since this data list uses ajax loading, the ajax time after click loading does not work. I hope you can help me take a look.
This is the data structure and page layout in 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>
    </div>
    <div class="list-data html-hide"></div>
</div></code>

The expansion

event and js request in clickajax are as follows

<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>

Settings and data settingsphp in 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>

I added all the styles in php and div! But it just doesn't work.

Reply content:

I have a data list with a click-to-expand effect. Since this data list uses ajax loading, the ajax time after click loading does not work. I hope you can help me take a look.
This is the data structure and page layout in 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>
    </div>
    <div class="list-data html-hide"></div>
</div></code>

The expansion

event and js request in clickajax are as follows

<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>

Settings and data settingsphp in 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>

I added all the styles in php and div! But it just doesn't work.

Thanks for the invitation. I have encountered a similar problem before, and it was also the ajax() loaded data that caused the original effect to become invalid. Here’s how I handle it

<code>// 初始化数据的时候我也是这么写的
$('.message-but').click(function(){
    // code...
});

// ajax加载后click事件不执行，又改成这样
$('.message-but').live("click",function(){
    // code...
});</code>

After searching online, I found out that this live() is actually used almost the same as bind(). Both can bind corresponding trigger events to future elements, but there are still differences between the two. You can try both, I hope it helps you

There is no live method after jquery1.9

For versions before jQuery 1.9 we can write like this:

<code>$("a").live("focus",function(){
  this.blur();
}); 
</code>

Since live was deleted after jQuery 1.9, it should be written like this:

<code>$(document).on("focus","a",function(){
  this.blur();
}); 
</code>

I took a quick look, and if each of your list-data-detail is dynamically loaded through Ajax, then the click event you write directly at the beginning will not work, thinking that when your event is bound This DOM does not exist.
At this time, you need to use 事件委托, inside jQuery, that is,

<code class="js">$('.list-data').on('click', '.open-detail', function() {
    /// here goes the code
});</code>

That’s it. Through event delegation, the event of the child element is bound to the parent element. After the child element is clicked, the event will bubble up to the parent element, and the parent element is responsible for catching and triggering the event.

To perform click on dynamically loaded elements, you can do this

<code>$(document).on('click','.message-but',function(){
    // code...
});</code>