代码之家 › 专栏 › 技术社区 › bhansa

对不工作的动态元素使用on()处理程序

html jquery javascript

bhansa · 技术社区 · 6 年前

我遇到了这样一种情况:一个元素加载到页面上(由某个第三方动态添加),并为该元素定义了某个事件。

.on() 不处理我正在动态添加的元素。

这里有什么问题?

// 1
$('#bhansa').click(function(){
  console.log('first');
})

// 2
$('.dom').on('click', '#bhansa', function(){
  console.log('second');
})

setTimeout(function(){
  $(".dom").html("<a href='#' id='bhansa'>Click me</a>");
}, 4000);

// 3
$('#bhansa').on('click', function(){
  console.log('last');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dom"></div>

3 回复 | 直到 6 年前

Zakaria Acharki 6 年前

在上使用事件委派 body remove/add DOM结构的组成部分:

$('body').on('click', '#bhansa', function(){
     console.log('second');
})

作为 @塔普拉 comment表示,如果您委托绑定的元素是动态创建的,则说明绑定太低,应绑定到非动态的更高父级上 身体

dorintufar 6 年前

问题是,如果删除dom组件,所有侦听器也将被删除。
尝试以这种方式添加侦听器:

$("body").on("click", "#bhansa", () => {console.log(123)})

Sanjeev Chauhan 6 年前

你也可以这样写:-

$(document).find().on('click', '#bhansa', function(){
    //code
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

5 月前

user28928120 · 如何在jquery中选择所有类?

5 月前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

5 月前

Eliable · 使点击计数器和进度条协同工作

6 月前

mlri · 从不同的onclick事件执行相同的javascript函数

6 月前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

6 月前

Jack Maessen · 在处理程序上使用时如何获取输入类型

6 月前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

6 月前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

6 月前