jquery:on 的实时包装器

Question

我们的js项目中有一个非常旧的jquery代码，我们正准备迁移到jquery 3，但是我在为live/on编写包装器时遇到了问题：

(function($)
{ 
    $.fn.click = function(f)
    {
        this.on('click', f);
        return this;
    };
    $.fn.live = function(e, f)
    {
        $(document).on(e, this, f);
        return this;
    };  
}(jQuery));

单击事件工作正常，但实时事件附加到我没有选择的另一个选择器，此处示例：https://jsfiddle.net/yvrbko35/

当您单击第一个 A 时，将执行 SPAN LIVE 代码

Answer 1

如果我

正确理解了您的问题，单击 #a1 也会触发单击时的跨度，这是您不想要的。

您可以检查目标是否与您不想在 span 上执行的事件的选择器匹配，并且仅在不匹配时才执行。

https://jsfiddle.net/q5ydLjj9/

$('span').live('click', function(e)
{
  if (!$(e.target).is('#a1'))
  {
    e.preventDefault();
    console.log('live click');      
   } 
  });  

Answer 2

编辑 Jquery Core 以获得 "selector"：

在此函数中：

init = jQuery.fn.init

起先：

this.selector = selector;

在此内部，如果：

if ( typeof selector === "string" )

在这个位置：

        // HANDLE: $(expr, $(...))
        } else if ( !context || context.jquery ) {
            var r = ( context || root ).find( selector );
            r.selector = selector;
            return r;
        // HANDLE: $(expr, context)
        // (which is just equivalent to: $(context).find(expr)
        }
        else
        {
            var r = this.constructor( context ).find( selector );
            r.selector = selector;
            return r;
        }

编辑对象以将选择器属性添加到返回对象

实时包装器的代码如下所示：

$.fn.live = function(e, f)
{   
    $(document).on(e, this.selector, f);
    return this;
};