Jquery 页面加载后加载 onclick 在 segond 加载时中断

Question

我有一个加载页面的代码 onclick 但是在页面加载一次之后，当我点击加载的 div 中的 link 以加载另一个东西或同样的事情，它不会加载它，而是直接将我带到页面。

这是我的 jquery 加载页面的代码

 jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.


///////////////////////////////////////////////////////////////////////////////

    $('a[rel*=charger_tout]').on('click', function() {

        var myId_to_update_here = $(this).data('ajax');

        var afficher_chargement = $(this).data('icon');

        if(afficher_chargement=='Oui')
        {
            $('#'+myId_to_update_here).html('<img src="images/facebook_style_loader.gif" />');
        }
        //Fin de l'affichage du chargement si le data-icon='Oui'



      $('#'+myId_to_update_here).load($(this).attr('href'), function(responseText, textStatus, XMLHttpRequest) {
                if(textStatus == 'error') {

                    $('#'+myId_to_update_here).html('<p>Oupps.. There was an error making the AJAX request. Maybe your internet connection is slowing down.</p>');
                }
            });

      return false;
    });
///////////////////////////////////////////////////////////////////////////////

});

这里是 link，它使我能够加载一个页面，其中包含我想再次加载的另一个 link onclick

<a href="brouillons.php?membre=max" rel="charger_tout" data-ajax="id_du_milieu" data-icon="Oui">charger_tout</a>

当我第一次点击时它会加载，但当我点击加载的 link 时，它不会加载 ajax 但它会带我到页面。如何解决？

我在无冲突模式下使用Jquery

Answer 1

click() 函数无法识别动态添加的元素（click() 是 .on('click', function() { ... }) 的快捷方式）。

在页面加载（第一次）时，click() 功能正常工作，因为点击的 link 已经在 DOM 中，但是在第二次加载时，新添加的link 无法识别。

在您的情况下，您必须使用事件委托：

$(document).on('click', 'a[rel*=charger_tout', function() {
    // your code here ..
});

Answer 2

由于第二个 link 是稍后添加的，而不是在加载页面时在 DOM 中添加的，因此您可以使用 on() 从静态父元素委托事件。而不是

$('a[rel*=charger_tout]').on('click', function() { ...

这将是（例如）

$(document).on('click', 'a[rel*=charger_tout]',  function() { ...

可以使用 DOM 中已有的 a 的每个父元素，而不是 $(document)。

供参考：http://api.jquery.com/on/

Jquery 页面加载后加载 onclick 在 segond 加载时中断

Jquery Load onclick breaks on segond load after page is loaded

ajax

jquery