Question

我有一个JS脚本，我直接在网站上使用过，一次在模态中。现在我有iOS问题的功能

$(document).on('click', '.btn-level', function(ev) {})

仅适用于模态，但不能直接在网站上使用。如果我正在使用它：

 $('.btn-level').click(function(ev) {})

它适用于网站，但不适用于模式。

我如何编写它以便在两种情况下都能正常工作？

Answer 1

您发布的两个表达式之间存在重大差异。

$(document).on('click', '.btn-level', function(ev) {})

绑定$(document)。在click内的任何$(document)事件中，如果ev.target与.btn-level选择器匹配，则会执行代码。这意味着即使您在执行绑定时单击DOM中 不存在的按钮 ，您的代码也会被执行。

第二种语法，

$('.btn-level').click(function(ev) {})

...当您运行绑定函数时，将一个事件绑定到DOM中存在的每个$('.btn-level')。这意味着如果您创建更多此类按钮或使用$.ajax()引导它们，则它们不会绑定任何事件。

这就是为什么你应该坚持使用第一种语法，如果你希望你的事件能够处理你所有的DOM元素，包括那些当前不存在于DOM中的元素。

另一个相当重要的注意事项是，如果出现以下情况，某些版本的Safari会忽略click个事件：

为了解决这个问题，您可能需要设置

.btn-level { cursor:pointer; }

在CSS中，如果隐藏输入，则将其更改为任何其他类型，并使用visibility隐藏它。