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">消費(fèi)者的信息會(huì)逐漸增多，如果有一個(gè)廠家，用更好的原料和工藝，就會(huì)迅速占領(lǐng)市場(chǎng)<p>
            <p><span>時(shí)間：2016-05-24</span> | <span>來(lái)源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1603">展開(kāi)</a></p>
        </div>
        <div class="list-data-detail">
            <p class="no-open">消費(fèi)者的信息會(huì)逐漸增多，如果有一個(gè)廠家，用更好的原料和工藝，就會(huì)迅速占領(lǐng)市場(chǎng)<p>
            <p><span>時(shí)間：2016-05-24</span> | <span>來(lái)源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1621">展開(kāi)</a></p>
        </div>
        <div class="list-data-detail">
            <p class="no-open">消費(fèi)者的信息會(huì)逐漸增多，如果有一個(gè)廠家，用更好的原料和工藝，就會(huì)迅速占領(lǐng)市場(chǎng)<p>
            <p><span>時(shí)間：2016-05-24</span> | <span>來(lái)源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1625">展開(kāi)</a></p>
        </div>
        <div class="list-data-detail">
            <p class="no-open">消費(fèi)者的信息會(huì)逐漸增多，如果有一個(gè)廠家，用更好的原料和工藝，就會(huì)迅速占領(lǐng)市場(chǎng)<p>
            <p><span>時(shí)間：2016-05-24</span> | <span>來(lái)源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1633">展開(kāi)</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($){
    //打開(kāi)
    $('.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('展開(kāi)');
        $(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('此處無(wú)您要的信息，到最新動(dòng)態(tài)去看看吧');
                }
      }
  });
}
</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>時(shí)間：'.date('Y-m-d', $value['updateTime']).'</span> | <span>來(lái)源：'.$value['author'].'</span> <a href="javascript:(0)" class="open-detail" data-id="'.$value['aid'].'">展開(kāi)</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">消費(fèi)者的信息會(huì)逐漸增多，如果有一個(gè)廠家，用更好的原料和工藝，就會(huì)迅速占領(lǐng)市場(chǎng)<p>
            <p><span>時(shí)間：2016-05-24</span> | <span>來(lái)源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1603">展開(kāi)</a></p>
        </div>
        <div class="list-data-detail">
            <p class="no-open">消費(fèi)者的信息會(huì)逐漸增多，如果有一個(gè)廠家，用更好的原料和工藝，就會(huì)迅速占領(lǐng)市場(chǎng)<p>
            <p><span>時(shí)間：2016-05-24</span> | <span>來(lái)源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1621">展開(kāi)</a></p>
        </div>
        <div class="list-data-detail">
            <p class="no-open">消費(fèi)者的信息會(huì)逐漸增多，如果有一個(gè)廠家，用更好的原料和工藝，就會(huì)迅速占領(lǐng)市場(chǎng)<p>
            <p><span>時(shí)間：2016-05-24</span> | <span>來(lái)源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1625">展開(kāi)</a></p>
        </div>
        <div class="list-data-detail">
            <p class="no-open">消費(fèi)者的信息會(huì)逐漸增多，如果有一個(gè)廠家，用更好的原料和工藝，就會(huì)迅速占領(lǐng)市場(chǎng)<p>
            <p><span>時(shí)間：2016-05-24</span> | <span>來(lái)源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1633">展開(kāi)</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($){
    //打開(kāi)
    $('.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('展開(kāi)');
        $(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('此處無(wú)您要的信息，到最新動(dòng)態(tài)去看看吧');
                }
      }
  });
}
</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>時(shí)間：'.date('Y-m-d', $value['updateTime']).'</span> | <span>來(lái)源：'.$value['author'].'</span> <a href="javascript:(0)" class="open-detail" data-id="'.$value['aid'].'">展開(kāi)</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>// 初始化數(shù)據(jù)的時(shí)候我也是這么寫(xiě)的
$('.message-but').click(function(){
    // code...
});

// ajax加載后click事件不執(zhí)行，又改成這樣
$('.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,

$('.list-data').on('click', '.open-detail', function() {
    /// here goes the 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>