在文档中添加新元素后，Jquery显示无法正常工作

我正在使用Ajax / Request将元素加载到div容器中。 默认情况下我隐藏了一个输入框。 如果用户单击该div上的编辑图标，我想显示输入框。 这是我的代码：

HTML代码

JS代码

  $(".container").click(function(){ console.log($(this).find(".editemail").show()); //Note it works fine If i didn't load any new elements into the div. }); 

控制台日志输出在将新元素加载到容器之前。

将元素加载到容器后的控制台日志输出。

尽管我也试图从这个元素中删除“style”属性并添加一个新的样式元素，但它仍然无效。

Answer 1

首先，您应该阅读jQuery Docs FAQ部分： Why_do_my_events_stop_working_after_an_AJAX_request

使用on（）来委托未来元素的处理程序

 $(document).on('click', ".container", function(){ /* your code*/ }) 

Answer 2

试试这个：

 $(document).on('click','.container',function(){ 

http://api.jquery.com/on/

Answer 3

试试这个：

 $('.container').live('click', function(){ /* Your Code Here */ }); 

Answer 4

问题是在ajax请求之后click()绑定会丢失。 在JQuery您可以使用.live()函数来实现此function，但现在不推荐使用此函数，并且它们鼓励您使用.on()或.delegate() 。 就个人而言，我有很多使用.on()和.delegate() ，而是使用插件livequery 。 使用livequery插件非常简单：

  $(function(){ $('#elementId').livequery('click',function(){ //do something on click }) }); 

有关更多信息，请访问： .livequery（）。 on（）。 delegate（）