Question

我使用jQuery选择器动态地将一系列事件添加到超链接......

... EG

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

我遇到的问题是我有很多div使用AJAX填充，因为渲染时间很长，也可能有数据切换，我需要能够将相同的事件附加到，但是事件并没有附上。

我已经尝试手动调用包含所有jQuery启动器的init();方法，但它第二次向先前更改的dom对象添加相同的事件，这会引发大量的UI和工作流故障。

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

我目前的代码如下......

jQuery Initiators

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>

注意：pagelet发起人看起来像这样......

$('[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();方法添加到.load()模块并强制它运行，但将上下文参数定义为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);
});

在AJAX加载后应用jQuery事件

1 个答案: