Jadual Kandungan
回复内容:
Rumah pembangunan bahagian belakang tutorial php javascript - js中ajax请求数据之后的click事件失效问题

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

Jul 06, 2016 pm 01:52 PM
ajax javascript php

我有一个数据列表,列表中有点击展开效果。由于这个数据列表用到了ajax加载,就是ajax加载之后的click时间不起作用了,希望各位大神帮忙看看。
这是html中的数据结构和页面布局

<code><div class="con-list">
    <div class="list-data">
        <div class="list-data-detail">
            <p class="no-open">消费者的信息会逐渐增多,如果有一个厂家,用更好的原料和工艺,就会迅速占领市场</p>
<p>
            </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>
            </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>
            </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>
            </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>
Salin selepas log masuk
Salin selepas log masuk

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>
Salin selepas log masuk
Salin selepas log masuk

php中的div设置及数据设置

<code><?php ...
...
...

foreach ($variable as $key => $value) {
   $html .='<div class="list-data-detail">';
   $html .='<p class="no-open">'.$value['desc'].'</p>
<p>';
   $html .='</p>
<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>
Salin selepas log masuk
Salin selepas log masuk

我在phpdiv中的样式都加了啊!可就是不行。

回复内容:

我有一个数据列表,列表中有点击展开效果。由于这个数据列表用到了ajax加载,就是ajax加载之后的click时间不起作用了,希望各位大神帮忙看看。
这是html中的数据结构和页面布局

<code><div class="con-list">
    <div class="list-data">
        <div class="list-data-detail">
            <p class="no-open">消费者的信息会逐渐增多,如果有一个厂家,用更好的原料和工艺,就会迅速占领市场</p>
<p>
            </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>
            </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>
            </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>
            </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>
Salin selepas log masuk
Salin selepas log masuk

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>
Salin selepas log masuk
Salin selepas log masuk

php中的div设置及数据设置

<code><?php ...
...
...

foreach ($variable as $key => $value) {
   $html .='<div class="list-data-detail">';
   $html .='<p class="no-open">'.$value['desc'].'</p>
<p>';
   $html .='</p>
<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>
Salin selepas log masuk
Salin selepas log masuk

我在phpdiv中的样式都加了啊!可就是不行。

谢谢邀请。我之前也遇到这种类似的问题,也是ajax()加载完的数据导致原来加的效果失效。如下是我的处理方式

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

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

之后通过网上查询才知道这个live()其实和bind()差不多一样用,都是可以给未来元素绑定对应的触发事件,但是二者还是有区别的。两者你都试试看,希望对你有帮助

在jquery1.9+之后就没有live方法了

jQuery1.9之前的版本我们可以这样写:

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

jQuery1.9之后由于live被删除了,所以应该这样写:

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

我大致看了一下,如果你的每个list-data-detail都是通过Ajax动态加载出来的,那么你开始直接写的click事件是无法起作用的,以为你的事件绑定的时候这个DOM并不存在。
这时候,你需要使用事件委托,在jQuery里,也就是

$('.list-data').on('click', '.open-detail', function() {
    /// here goes the code
});
Salin selepas log masuk

这样就行了。通过事件委托,将子元素的事件绑定到父元素上,子元素被点击之后,事件会冒泡到父元素,由父元素负责捕捉然后触发事件。

动态加载的元素要执行点击可以这样

<code>$(document).on('click','.message-but',function(){
    // code...
});</code>
Salin selepas log masuk
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Konfigurasi Projek CakePHP Konfigurasi Projek CakePHP Sep 10, 2024 pm 05:25 PM

Dalam bab ini, kita akan memahami Pembolehubah Persekitaran, Konfigurasi Umum, Konfigurasi Pangkalan Data dan Konfigurasi E-mel dalam CakePHP.

Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Dec 24, 2024 pm 04:42 PM

PHP 8.4 membawa beberapa ciri baharu, peningkatan keselamatan dan peningkatan prestasi dengan jumlah penamatan dan penyingkiran ciri yang sihat. Panduan ini menerangkan cara memasang PHP 8.4 atau naik taraf kepada PHP 8.4 pada Ubuntu, Debian, atau terbitan mereka

Tarikh dan Masa CakePHP Tarikh dan Masa CakePHP Sep 10, 2024 pm 05:27 PM

Untuk bekerja dengan tarikh dan masa dalam cakephp4, kami akan menggunakan kelas FrozenTime yang tersedia.

Muat naik Fail CakePHP Muat naik Fail CakePHP Sep 10, 2024 pm 05:27 PM

Untuk mengusahakan muat naik fail, kami akan menggunakan pembantu borang. Di sini, adalah contoh untuk muat naik fail.

Penghalaan CakePHP Penghalaan CakePHP Sep 10, 2024 pm 05:25 PM

Dalam bab ini, kita akan mempelajari topik berikut yang berkaitan dengan penghalaan ?

Bincangkan CakePHP Bincangkan CakePHP Sep 10, 2024 pm 05:28 PM

CakePHP ialah rangka kerja sumber terbuka untuk PHP. Ia bertujuan untuk menjadikan pembangunan, penggunaan dan penyelenggaraan aplikasi lebih mudah. CakePHP adalah berdasarkan seni bina seperti MVC yang berkuasa dan mudah difahami. Model, Pandangan dan Pengawal gu

Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP Dec 20, 2024 am 11:31 AM

Kod Visual Studio, juga dikenali sebagai Kod VS, ialah editor kod sumber percuma — atau persekitaran pembangunan bersepadu (IDE) — tersedia untuk semua sistem pengendalian utama. Dengan koleksi sambungan yang besar untuk banyak bahasa pengaturcaraan, Kod VS boleh menjadi c

Pengesah Mencipta CakePHP Pengesah Mencipta CakePHP Sep 10, 2024 pm 05:26 PM

Pengesah boleh dibuat dengan menambah dua baris berikut dalam pengawal.

See all articles