Question

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

HTML CODE

    <div class='container'>
      <input type = 'text' onkeydown='saveFn(event,this)' name = 'editemail' class = 'editemail' style='display:none;     height:20px;' />
    </div>

JS CODE

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

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

   <input type="text" onkeydown="saveFn(event,this)" name="editemail" class="editemail" style="height: 20px; " value="hyther@zohocorp.com" title="press enter to save">

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

<input type="text" onkeydown="saveFn(event,this)" name="editemail" class="editemail" style="height: 20px; display: none; " value="saravanan@zohocorp.com" title="press enter to save">

即使我也尝试删除＆＃34;样式＆＃34;来自此元素的属性并添加新的样式元素，它仍然无法正常工作。

Answer 1

首先，您应该阅读jQuery文档常见问题解答部分：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()函数来实现此功能，但现在不推荐使用此功能，并且建议您使用.on()或.delegate()。就个人而言，我使用.on()和.delegate()并拥有大量的headecks，而是使用插件livequery。使用livequery插件非常简单：

 $(function(){

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

欲了解更多信息，请访问： .livequery() .on() .delegate()

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

4 个答案: