JQuery On and Live

Question

我有一个JavaScript文件MyJavascript.js，它包含在各种Web应用程序中。问题是在一个应用程序中我使用 JQuery v1.5.1，其中"Live"功能工作得很好，但在另一个应用程序中，由于我使用 Bootstrap，所以我使用 v2.1.1.，其中"on"有效而"live"不起作用。

有什么方法可以让我的 JS 文件以适用于两个版本的 JQuery 的方式编写

？

++ Abhay

Answer 1

你总是可以用自己的函数扩展jQuery对象，使事情成为可能。

此问题的解决方案是以下函数：

(function($) {
  $.fn.compatibleOn = function(event, handler){
    if(typeof jQuery().on === 'function')
    {
      $(this).on(event, handler);
    }
    else
    {
      $(this).live(event, handler);
    }
  }
})( jQuery );

您现在只需致电

jQuery('.my-link').compatibleOn('click', function(){alert('TEST');});

有关工作示例，请参阅 http://jsfiddle.net/acs884t2/1/。

Answer 2

我相信

你可以在两个版本中使用delegate（）函数。另一种选择是测试 jQuery 对象中是否存在 on() 函数，如果缺少该函数，则在修补的函数中使用 delegate() 或 live() 创建它。

下面是如何执行此操作的示例：

if(!$.fn.on) {
    $.fn.on = function(event, selector, handler) {
        if (arguments.length == 2) {
            return this.bind(event, selector);
        } else {
            return this.delegate(selector, event, handler);
        }
    };
}

经过编辑以支持更多on()功能

Answer 3

感谢您的回答。

将事件附加到动态添加元素的问题仍然存在。所以，我写了一个Javascript函数，如下所示：

function compatibleOn(event, selector, handler) {
  if (typeof jQuery().on === 'function') {
    $(document).on(event, selector, handler);
  } else {
    $(selector).live(event, handler);
  }
};