0

on使用和find使用后调用jquery函数有什么区别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在绑定每个函数之前使用过，但它不起作用。

4

3 回答 3

0

ID 必须是唯一的。

不知道你想做什么，但根据 HTML 结构

$('div.outer').find(".outer span").length === 0; //true
于 2013-01-29T13:41:18.380 回答
0

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

最后两个是常规事件处理程序，find()只是在另一个元素中找到一个元素，因此在中间的一个中它搜索#buttonwithin .inner，.outer并将常规事件处理程序附加到#button.

由于 ID 是唯一的，因此使用 find 方式确实是不必要的，$('#button').on()应该足够了。

在最后一个中，单击绑定到跨度，而不是按钮，因此任何单击按钮都不会触发事件，但单击跨度会。

编辑：

您的选择器搜索.outerinside .outer，这就是它不起作用的原因，您应该只在 .outer 内搜索一个跨度，所以这样：

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

应该是这样的：

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

小提琴

于 2013-01-29T13:41:32.020 回答
0

使用 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
});
于 2013-01-29T13:48:36.573 回答