从 Ajax 响应在 HTML 上设置事件的最佳 jQuery 实践答案

【问题标题】：Best jQuery practice for setting events on HTML from Ajax responses从 Ajax 响应在 HTML 上设置事件的最佳 jQuery 实践
【发布时间】：2012-02-25 22:57:21
【问题描述】：

（抱歉，太长了，mmmv！）我是 jQuery 新手（通过 Rails 3），并且有一个一般的最佳实践问题...

我有一个链接，它分别通过 ajax:beforeSend 和 ajax:success 绑定来切换 div、隐藏或显示和填充它（使用 xhr.responseText）。 responseText 是 HTML：现有电子邮件地址的一些表单和创建新电子邮件地址的链接。单击新链接会通过 Ajax 在上面的切换打开的 div 顶部加载一个空白的电子邮件地址表单。

我希望新电子邮件地址表单中的第一个字段接收焦点，并通过 jQuery 不显眼地做到这一点，我需要在原始切换的 ajax:success 绑定中触发自定义事件并让自定义事件绑定将代码重点放在新链接上。

在阅读了 .live、.delegate 和 .on 之后，我认为 jQuery 可能会更简单地匹配和操作通过 Ajax 添加到页面的新内容（即：“现在和未来”），而我的方法在工作时似乎很脆弱且紧密耦合。

我对通过 Ajax 返回的 HTML 内容有更多的行为，我很好奇我是否遗漏了什么并且有更好的方法？

以下代码供参考，在此先感谢！

$(document).ready(function() {
    $('.shows-children').bind('ajax:beforeSend', function(evnt, xhr, settings){

        var boxSelector = '#' + $(this).data("shows");

        if($(boxSelector).is(':visible')){
            $(boxSelector).fadeOut(function(){
                $(this).empty();
            });
            return false;
        } else {
            $(boxSelector).fadeIn();
        }
    });

    $('.shows-children').bind('ajax:success', function(evnt, data, status, xhr){
        var boxSelector = '#' + $(this).data("shows");

        $(boxSelector).html(xhr.responseText);
        $('a.new').trigger('set_bindings_for_new_links');
    });

});


$(document).on('set_bindings_for_new_links', function(){
    $('a.new').bind('ajax:success', function(evnt, data, status, xhr){
        $(this).parent().find('form[id^="new_"] :input:visible:first').focus();
    })
});

【问题讨论】：

标签： jquery ajax binding