Question

使用on调用jquery函数和使用find调整on之后有什么区别

<div class="outer">
    <span>One</span>
    <div class="inner"><button id="button">button 1</button></div>
</div>
<div class="outer">
    <span>Two</span>
    <div class="inner"><button id="button">button 2</button></div>
</div>

jquery代码是

$(document).ready(function(){

    $('div.outer').on('click',".inner #button",function(event){
        console.log(this);//this works
    });
    $('div.outer').find(".inner #button").on("click",function(event){
        console.log(this);//this works
    });
    $('div.outer').find(".outer span").on('click',function(event){
        console.log(this);//this not works
    });
});

这是一个简单的例子我正在创建一个jquery插件，它有多个实例，所以每个按钮点击两次。在绑定每个函数之前我使用jquery.off，但它不起作用。

Answer 1

ID必须是唯一的。

不确定您要做什么，但根据HTML结构

$('div.outer').find(".outer span").length === 0; //true

Answer 2

第一个是动态事件处理程序，它将事件绑定到div.outer的父项#button，但基于#button选择器的过滤器，即使在绑定事件时元素不存在，即动态插入元素。

最后两个是常规事件处理程序，而find()只是在另一个元素中找到一个元素，所以在中间一个元素中#button在.inner内搜索.outer }，并将常规事件处理程序附加到#button。

由于ID是唯一的，因此只需$('#button').on()即可，因此使用find非常不合适。

在最后一个中，点击被绑定到跨度，而不是按钮，所以任何点击按钮都不会触发事件，但点击跨度将会。

修改

您的选择器会在.outer内搜索.outer，这就是为什么它无法正常工作，您应该只搜索内部的。::,这样：

$('div.outer').find(".outer span")

应该是这样的：

$('div.outer').find("span")

FIDDLE

Answer 3

使用on（）你应该能够将事件监听器附加到任何元素并指定它可以被另一个元素触发（在该元素内）;

在这种情况下，事件监听器将位于id为“button”

的元素上

$('#button').on('click', function(){
    console.log('if you dynamically remove #button from the page the event will be lost');
})

在这种情况下，事件监听器将位于元素主体上：

$('body').on('click', '#button', function(){
    console.log('if you dynamically remove #button from the page the event will not be lost');
})

现在，关于使用find（），我更喜欢使用css选择器，尝试这样的事情：

$('div.outer span').on('click', function(event){
    console.log('this works');
    console.log(event.currentTarget); //the element you have clicked on
});

调用jquery函数的两种方法有什么区别？

3 个答案: