javascript中的jquery .on()本机函数答案

【问题标题】：Jquery .on() native function in javascriptjavascript中的jquery .on()本机函数
【发布时间】：2015-02-18 11:55:54
【问题描述】：

我创建了使用 jquery 最新版本 1.11.1 的小部件。当我将我的小部件添加到第 3 方网站时。

并且第 3 方网站的 jquery 版本较低，例如1.5 在我的情况下（它可以是任何版本）。第三方网站jquery没有最新功能。

例如最新版本功能

 jQuery(document).on("click", function(e) { 
...
});

所以我得到错误函数未定义。如何解决此类问题。

或者我是否以错误的方式创建了依赖于 jquery 的小部件？如果有人知道如何实现不依赖于第三方库（如 jquery 不同版本）的 java 脚本小部件。

【问题讨论】：

代替.on()使用.live()
在 jQuery 1.5 中，你有 [.delegate()][api.jquery.com/delegate/]
是的，我知道实时功能，但如果第 3 方网站在这种情况下不使用 jquery 1.5，它将无法正常工作。这是静态变化。我想要动态变化。因为我不知道第 3 方网站正在使用哪个 jquery 版本，所以它可能是任何东西。
如果我没有找到 .on() 事件那么我想使用 .live() 否则它将使用相同的
你可以只使用jQuery(document).click(function(e) { }) - 在这种情况下你为什么要使用.on()，因为你没有使用任何委托

【解决方案1】：

如果您使用的是事件委托，那么只有这个答案才适用

在 jQuery 1.5 中，你有 .delegate() 方法，你可以使用它

$( "table" ).delegate( "td", "click", function() {
  $( this ).toggleClass( "chosen" );
});

不要使用 .live()，因为它在版本 >= 1.9 中被删除

【讨论】：

【解决方案2】：

on 方法在 1.5 版本中是未知的

你应该改用这个语法：

jQuery(document).click(function(e) { 
...
});

【讨论】：

【解决方案3】：

jQuery(document).click(function(e) { 这里没有委托

对于动态 HTML，请使用 live 事件，因为它适用于旧的 jquery 版本，您必须使用不推荐使用的语法，因为它使用旧的 jQuery。

如果您必须处理动态数据，请使用live()

【讨论】：

【解决方案4】：

Jquery .on() 在 1.6+ 版本中添加。对于以前的版本，您需要使用.live()

由于您没有委托事件，您可以简单地使用.click() 附加点击事件：

jQuery(document).click(function(e) { 
  ...
});

【讨论】：

【解决方案5】：

我认为没有任何直接/动态的方法可以解决您的问题。即使您使用“点击”功能解决了问题。您可能会遇到另一个函数的问题，该函数要么在较低版本的 JQuery 中不支持，要么具有不同的语法/行为。

例如低版本的 JQuery 可能不支持像'fadeOut(1000)'这样的一些动画（这只是示例。您需要检查是否支持这些类型的 API。）

所以实际上你可能只需要进行跟踪和错误。使用所有可用的 JQuery 版本测试您的 JQuery 小部件/插件。

一切正常后，你就可以走了。

【讨论】：

您可能必须使用 if...else 或 ?... 在您的小部件/插件中同时使用 .live() 和 .on() ：取决于 jquery 版本
我为我的小部件找到了另一种方法。我已将我的小部件放入自动调整大小的 iframe 中。这是我找到的最终解决方案。它适用于任何网站。没有 javascript 冲突。