Question

更新了完整代码

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

这有效：

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

这不起作用，当我点击容器中的 ANYWHERE 时会调用提醒，但我只想要“。删除”选择器。

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

div.container 是对话框中的div。我也尝试使用 body 和文档作为容器，同样的影响。

以下是完整的代码

这种工作，但它不会绑定到.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();
});

感谢。

Answer 1

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

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

Answer 2

使用：

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

Answer 3

在没有看到更多代码的情况下很难确定，但可能是在初始化对话框之前或在div.content元素出现之前添加委托。如果是这种情况，则div.container可能不存在，因此不会受到约束。

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

这似乎有用，也许它会对你有帮助。

对话框内的jQuery委托 - 选择器不起作用

3 个答案: