javascript - 使用 jQuery 获取委托(delegate)事件中被点击的元素

标签 javascript jquery jquery-events

页面加载后,我将一些元素添加到 DOM 中。我想在点击它们时执行一些操作。我正在使用 jQuery 的委托(delegate),但我不知道当我在函数中时如何获取单击的元素($(this) 在本例中指的是父元素)

<div id="parent">
    <div class="child">
        <div class="hidden"></div>
    </div>
    <div class="child">
        <div class="hidden"></div>
    </div>
</div>

<script>
$('#parent').click('.child', function(){
    $(this).find('.child').toggleClass("hidden displayed")
});
</script>

假设我想在单击“子”div 时将内部 div 从“隐藏”切换为“显示”。目前,当我单击第一个“子”div 时,两个“隐藏”div 将被切换,而我只想切换我单击的 div 中的那个。

最佳答案

使用e.target找出事件源自哪个元素。

$('#parent').on('click', '.child', function(e){
    $(e.target).toggleClass("hidden displayed")
});

我还稍微修复了代码 - 您需要使用 .on 来处理委托(delegate)事件。 (巴马尔提到过。)

关于javascript - 使用 jQuery 获取委托(delegate)事件中被点击的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26657058/

相关文章:

javascript - 如何混淆或缩小 Javascript 文件

javascript - 我需要使用 Protractor 初始化 Spec 文件中的页面对象吗?

javascript - 动态调整 HTML div 对象和子元素的大小

javascript - 将多个按键绑定(bind)到按键事件

javascript - 从数据标题中删除内联样式表

javascript - 如何使用选择标签隐藏/显示选择标签?

javascript - Nightmare .click 事件 onclick

javascript - 调用事件后等待事件监听器完成

javascript - jQuery 元素完全加载后如何执行单击事件?

javascript - 使用Select 2下拉菜单进行10000条以上的大数据搜索