繁体   English   中英

Click事件不适用于动态附加的div

[英]Click event not working on a div appended dynamically

我正在使用Google Place自动完成功能

当我在自动填充文本框中搜索任何内容时,Google会在我的html中添加一些div,

<div class="pac-container" style="position: absolute; z-index: 1000; width: 134px; left: 885px; top: 412px; display: none;">
    <div class="pac-item remove">This is me </div>
  <div class="pac-item"><b>A</b>ustralia</div>
  <div class="pac-item"><b>A</b>bbas Town, Karachi, Sind, Pakistan</div>
  <div class="pac-item"><b>A</b>ustria</div>
  <div class="pac-item"><b>A</b>rgentina</div><div class="pac-item"><b>A</b>rizona</div></div>

现在您可以注意到,第一个子离子pac-container与其他子离子pac-container ,我出于某种目的动态添加了该div。 现在,如果我想将一个事件绑定到该div,则无法正常工作。

这是我在做什么

$('.remove').live('click', function () {
   console.log("working");
});

提前致谢 。 更新资料

我想你们误会了我,如果我将动态div放到除pac-container之外的任何其他地方,那么它就起作用了,但是当我将div放入pac-container它就不起作用了,我尝试了几乎每个人的解决方案,但是没人作品。
希望现在你们了解情况。 谢谢

更新2

这是我上传工作的链接

您没有提到要使用哪个版本的jquery,但自on以来, jquery 1.7 live已被弃用,因此可以用以下版本替换live绑定:

 $('.pack-container').on('click', '.remove', function(){
     console.log("working");
  });

如果pack-container也是动态创建的元素,那么您需要将以上内容修改为:

 $(document).on('click', '.remove', function(){
     console.log("working");
  });

官方文档在这里http://api.jquery.com/on/

$(document).on('click', '.remove', function () {
   console.log("working");
});
$(document).on('click','.remove', function () {
   //Your code
});

您应该使用.on委托事件。 顺便说一句, .live已过时。 而是使用.on方法。 问题是动态添加的元素在页面加载时不可用,无法将事件绑定到它们。 因此发生错误。 尝试将事件绑定到专利,在您的情况下可能是另一个div或document就可以了。

阅读更多

直接与委派-jQuery .on()

我已经尝试过您的代码正常工作。我认为您正在使用dom ready函数执行此click函数。如果您尝试在dom ready中对动态元素执行click函数意味着它将无法正常工作。

在jsfiddle中检查您的代码http://jsfiddle.net/mNq5X/

   <div class="pac-container">
   <div class="pac-item remove">This is me </div>
   <div class="pac-item"><b>A</b>ustralia</div>
   <div class="pac-item"><b>A</b>bbas Town, Karachi, Sind, Pakistan</div>
   <div class="pac-item"><b>A</b>ustria</div>
   <div class="pac-item"><b>A</b>rgentina</div><div class="pac-item"><b>A</b>rizona</div>     
  </div>

js

$('.remove').live('click', function () {
  console.log("working");
});

因此,您的解决方案是在附加以下div之后添加上述click函数

          <div class="pac-item remove">This is me </div>

由于您的div是动态附加的,因此我认为您的点击事件代码应在附加div之后放置。 否则$('。remove')将返回'null',您的click事件将不起作用。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM