JQuery绑定（'click'）到多个选择器不起作用

Posted 2023-05-08

【中文标题】JQuery绑定（\'click\'）到多个选择器不起作用

【英文标题】：JQuery binding on('click') to multiple selectors not workingJQuery绑定（'click'）到多个选择器不起作用

【发布时间】：2013-09-02 09:16:03

【问题描述】：

请看下面的更新

这是我的代码：

$(document).on('click', '#btnClose, .ui-dialog-titlebar-close', function () 
    alert('test');
);

当我点击#btnClose 时它会触发，但不会触发右上角的 jQuery UI 关闭按钮。

我也尝试过翻转它，我得到了相同的结果。

$(document).on('click', '.ui-dialog-titlebar-close, #btnClose', function () );

这是 jQuery UI 关闭按钮的 html：

<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
    <span class="ui-button-icon-primary ui-icon ui-icon-close"></span>
    <span class="ui-button-text">close</span>
</button>

更新按钮在 iframe 中。这一定是问题所在。有什么创意吗？

这是我目前拥有的：

       function closeDialog() 
           alert('Closing');
               //this works fine
       

       $(document).on('click', '#btnClose', function () 
           closeDialog()
               //this never fires
       );

       window.parent.$(document).on('click', '.ui-dialog-titlebar-close', function () 
           closeDialog();
       );

第二个仍然不工作。请记住，脚本是 iFrame 的一部分，因此它需要从父级访问选择器。奇怪的是我正在使用 window.parent.$() 做其他事情没有问题。

【问题讨论】：

你能更新这个小提琴来重现你的错误吗？ jsfiddle.net/Us7R9

显然不行，它工作正常...jsfiddle.net/Us7R9/2

一定是因为modal的内容是iframe。我试图让小提琴反映这个问题，但我无法将本地 div 加载到 iframe 中......jsfiddle.net/Us7R9/5

【参考方案1】：

这很疯狂，但它确实有效。

$('#btnClose').add(parent.$('.ui-dialog-titlebar-close')).on('click', function () 
    closeDialog();
);

【参考方案2】：

如果iframe 的内容不在同一个域中，则您不能以任何方式与之交互。 （有postMessage，但这是另一个话题）。

如果 iframe 来自同一个域，这很容易，而不是：

$(document)

使用

$("#iframeID").contents().

【讨论】：

脚本在 iframe 中。我正在尝试使用 window.parent，但到目前为止仍然没有运气。

所以你把这个jQuery 放在iframe（你的网站）中并想要访问父级（在同一个域上）？所以你使用$(window.parent)?

$(window.parent).on('click', '.ui-dialog-titlebar-close') 也不起作用。

parent.$(".selector") 工作并引导我找到我刚刚发布的完整答案。

【参考方案3】：

您可能正在与same-origin policy 打交道。安全策略将防止与来自其他站点或协议的元素发生冲突。

【讨论】：

我不这么认为。我正在使用 window.parent 以其他方式操作模式。所有这些文件都是同一站点/服务器上同一项目的一部分。

【参考方案4】：

原始代码中缺少右圆括号。 JS 对括号非常敏感。如果缺少括号并且您的代码将不起作用，则调用将不正确。 我已经修复了你的代码：

$(document).on('click', '#btnClose, .ui-dialog-titlebar-close', function () 
    alert('test');
);

同样适用于第二段代码：

$(document).on('click', '.ui-dialog-titlebar-close, #btnClose', function () 
);

在这两种情况下，.on 函数都有三个参数：两个字符串和回调函数。

这可能是复制/粘贴错误，但很可能恰好是问题的“原因”。

【讨论】：

没问题。当您没有编译步骤来进行检查时，这些很容易被忽略。