Question

我有一个代码可以加载页面onclick但是在页面加载一次之后，当我点击加载的div中的一个链接来加载另一个东西或同样的东西的时候，它不会加载它但是它而是直接引导我到页面。

这是我加载页面的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;
    });
///////////////////////////////////////////////////////////////////////////////

});

这是一个链接，使我能够加载包含我想再次加载的另一个链接的页面

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

当我第一次点击它加载但是当我点击加载的链接时，它不会加载ajax但它会带我到页面。怎么解决？

我在noConflict中使用 Jquery 模式

Answer 1

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

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

这将是（例如）

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

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

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

Answer 2

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

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

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

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

加载页面后，Jquery Load onclick打破segond加载

2 个答案: