应用jQuery的AJAX事件载入后

Question

我有一个范围内动态添加到使用jQuery选择超链接事件......

EG ...

$('a[data-toggle="email"]').click(function(){ 
//Do Something 
}); 

我的问题是，我有一个数的div使用AJAX填充由于长的渲染时间，也可以有数据切换，我需要能够附加相同的事件，但事件不附加。

我试过手动调用我的init();方法，该方法包含所有jQuery启动器，但它第二次将相同的事件添加到先前更改的dom对象，这引发了广泛的UI和工作流故障。

我的问题是，如果有一种方法只允许jQuery启动器对尚未对其进行更改的DOM对象进行更改，或者有更好的方法来执行此操作。这样做的目的是消除将代码复制到多个位置或需要在每次单个AJAX加载或多个位置后手动调用方法的需要，因此，jQuery本机解决方案将在AJAX之后自动应用这些更改仅对新加载的内容完成加载才是首选。所有的AJAX加载都是通过使用jQuery.load()方法将DIV本身定义为父对象来完成的。

我当前的代码如下...

jQuery的发起人

function jInit() { 
    /* 
    * The following selectors and methods are executed when the page finishes loading and are used to automatically apply jQuery based functionality to pre-defined dom objects. 
    */ 

    //Automatically close displayed message callouts after 3 seconds 
    setTimeout(function(){$(".callout").hide("drop"); }, 3000); 

    //Enable contact name links to display modal contact card 
    $('a[data-toggle="contact-card"]').click(function(){ 
     alert('Show contact card!'); 
    }); 

    //Configure all email links to be sent using CCB email activity form 
    $('a[data-toggle="email"]').click(function(){ 
     alert("Send email to " + $(this).text() + " using CCB email activity"); 
    }); 

    //Configure all help buttons to trigger help sidebar 
    $('a[data-toggle="help"]').click(function(){ 
     alert("Show help file " + $(this).data("help-file")); 
    }); 

    //Configure all user links to show user overview hovercard 
    $('a[data-toggle="user"]').hovercard({ 
     detailsHTML: 'Loading...', 
     width: 400, 
     onHoverIn: function() { 
      var elem = $(this).children("div"); 
      $.ajax({ 
       url: '/components/users/_hovercards/user-hovercard.php', 
       type: 'GET', 
       dataType: 'text', 
       beforeSend: function() { 
        elem.html("Loading..."); 
       }, 
       success: function(data) { 
        elem.empty(); 
        elem.html(data); 
       }, 
       complete: function() { 

       }, 
       error: function() { 
        elem.html("An error occured loading the user data..."); 
       } 
      }); 
     } 
    }); 
}; 

它加载使用AJAX内容父DIV ...

<div class="box-body no-padding" data-toggle="pagelet" data-url="/components/activities/_pagelets/activities.pagelet.php?filter=account&amp;rid=934793475934953&amp;latest=10"> 
       <div class="text-center"> 
        <img src="/img/ajax-loader.gif" /> 
       </div> 
      </div> 

注：所述小网页看起来引发像这样...

$('[data-toggle="pagelet"]').each(function(){ 
     $(this).load($(this).data("url"), function(response, status, xhr) { 
      if(status == "error") { 
       $(this).html("<div class='text-center'>An error occured loading the pagelet<br />" + xhr.status + " " + xhr.statusText + "</div>"); 
       return false; 
      }; 
     }); 
    }); 

任何援助与此表示赞赏。

Answer 1

我已经找到了做到这一点的方法，对jQuery选择器的进一步研究表明，我可以将可选的上下文参数应用于选择器，将选择器的范围限制为定义的上下文的子元素。

有什么用，我能够做的是jInit();方法添加到​​模块上的成功，迫使它运行，但定义上下文参数为jInit(this);，并采取参数，并在jInit();方法中的每一个选择将其嵌入。对于页面加载时的初始方法执行，我将上下文定义为jInit(document);。

EG ...

function jInit(context) { 
    /* 
    * The following selectors and methods are executed when the page finishes loading and are used to automatically apply jQuery based functionality to pre-defined dom objects. 
    */ 

    //Automatically close displayed message callouts after 3 seconds 
    setTimeout(function(){$(".callout", context).hide("drop"); }, 3000); 

    $(".test1", context).html("TEst Success"); 

    //Enable contact name links to display modal contact card 
    $('a[data-toggle="contact-card"]', context).click(function(){ 
     alert('Show contact card!'); 
    }); 

    //Configure all email links to be sent using CCB email activity form 
    $('a[data-toggle="email"]', context).click(function(){ 
     alert("Send email to " + $(this).text() + " using CCB email activity"); 
    }); 

    //Configure all help buttons to trigger help sidebar 
    $('a[data-toggle="help"]', context).click(function(){ 
     alert("Show help file " + $(this).data("help-file")); 
    }); 

    //Configure all user links to show user overview hovercard 
    $('a[data-toggle="user"]', context).hovercard({ 
     detailsHTML: 'Loading...', 
     width: 400, 
     onHoverIn: function() { 
      var elem = $(this).children("div"); 
      $.ajax({ 
       url: '/components/users/_hovercards/user-hovercard.php', 
       type: 'GET', 
       dataType: 'text', 
       beforeSend: function() { 
        elem.html("Loading..."); 
       }, 
       success: function(data) { 
        elem.empty(); 
        elem.html(data); 
       }, 
       complete: function() { 

       }, 
       error: function() { 
        elem.html("An error occured loading the user data..."); 
       } 
      }); 
     } 
    }); 
}; 

而AJAX装载机...

$(this).load($(this).data("url"), function(response, status, xhr) { 
      if(status == "error") { 
       $(this).html("<div class='text-center'>An error occured loading the pagelet<br />" + xhr.status + " " + xhr.statusText + "</div>"); 
       return false; 
      } else { 
       //Load Was Successful 
       jInit(this); 
      }; 
     }); 

最后在页面加载最初的发起者...

$(document).ready(function(){ 
jInit(document); 
});