对话框中的 jQuery 委托 - 选择器不起作用答案

【问题标题】：jQuery Delegate inside a Dialog - Selector didn't work对话框中的 jQuery 委托 - 选择器不起作用
【发布时间】：2012-03-07 23:33:10
【问题描述】：

已更新完整代码

我有一个 jQuery 对话框，我想将一些单击处理程序事件绑定到使用 jQuery 委托，但不知何故它不起作用。

这行得通：

$('table.standard tbody td .delete').live('click', function() {
    alert('delete something');
});

这不起作用，当我在容器中单击 ANYWHERE 时会调用警报，但我只希望 ".delete" 选择器使用它。 p>

$('div.container').delegate('table.standard tbody td .delete', 'click', function() {
    alert('delete something');
});

div.container 是对话框内的 div。我也试过用 body 和 document 作为容器，效果一样。

这是完整的代码

这有点工作，但它不会绑定到 .delete 类选择器，而是绑定到整行。

function ClientTierDialog_class() {
    var self = this;

    this.fDialogBehavior = function(dialog) {
        $(dialog).find("a.button").unbind("click").bind("click", function(e) {

            if ($(this).hasClass("cancelButton")) {
                $(dialog).dialog("close");
            }
            else if ($(this).hasClass("okButton")) {
                self.saveTier();
            }
        });
    };

    this.$dialog = null;

    this.baseOptions = {
        id: "TierDialog",
        width: 585,
        height: 600,
        className: "tier-dialog",
        header: "Create Tier",
        body: "",
        buttonText: {
            cancel: "Close",
            ok: "Save"
        },
        resizable: false,
        modal: true,
        fDialogBehavior: this.fDialogBehavior
    };
}

/***************************************************************
* Events
***************************************************************/

ClientTierDialog_class.prototype.openDialog = function(options) {
    var self = this;
    var tierName = options.tierName;
    var url = "Administration/GetClientTierDialog";

    this.$dialog = null;

    $.ajax({
        url: url,
        data: options,
        success: function(response) {
            var $content = $(response.html);
            var options = self.baseOptions;

            if (tierName !== undefined && tierName.length > 0) {
                options.header = "Edit Tier";
            }

            options.body = $content;
            WSOD.dialog(options);

            this.$dialog = $("div.tier-dialog");
            self.initEvents();
        },
        error: function() {
            // Handle errors
        }
    });
};

ClientTierDialog_class.prototype.delete = function() {
    $('table#addedFirms tbody tr').delegate('.delete', 'click', function() {
        alert('delete something');
    });
};

ClientTierDialog_class.prototype.initEvents = function() {
    var self = this;
    self.delete();
};

$(document).ready(function() {
    ClientTierDialog = new ClientTierDialog_class();
});

谢谢。

【问题讨论】：

在执行delegate 时是否存在div.container？（它是否在 DOM 就绪事件处理程序中？）
div.container 在对话框打开时存在。谢谢。
你应该发布更多的 HTML 和 JS。
我已经更新了完整的代码......目前，delete 方法有点工作，但没有真正工作......这个方法不是在 .delete 类上执行，而是在整个行点击。谢谢。

标签： jquery jquery-ui jquery-selectors

【解决方案1】：

JQuery 标准倾向于 on 和 off 1.7+ 版本：

$('table.standard').on('click', '.delete', function() {
    alert('delete something');
});

【讨论】：

我们仍在使用 jQuery 1.5，所以“on”不是一个选项。谢谢。
您知道，升级 jQuery 不仅简单，而且值得推荐。自 1.5 以来，他们修复了许多错误，并取得了惊人的性能改进。
我明白，但我不能做出这个决定 :) 仅供参考，当 MVC 4 测试版已经发布时，我们仍在使用 ASP.NET MVC 1！

【解决方案2】：

用途：

$(document).delegate('table.standard tbody td .delete', 'click', function() {
    alert('delete something');
});

【讨论】：

无法让 $(document) 工作。尝试了 $('body') ，我点击的任何地方都会收到警报！

【解决方案3】：

如果没有看到更多代码，很难确定，但可能是您在对话框初始化之前或在 div.content 元素出现之前添加了委托。如果是这样，那么 div.container 可能不存在，因此不会被绑定。

试试这个：http://jsbin.com/itiyel/4/edit#preview

这似乎有效，也许会对您有所帮助。

【讨论】：