javascript - 在文档中添加新元素后，jQuery 显示不起作用

Question

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

HTML 代码

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

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.
 });

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

   <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">

尽管我也尝试从此元素中删除“style”属性并添加新的样式元素，但它仍然不起作用。

Answer 1

首先您应该阅读 jQuery 文档常见问题解答部分:Why_do_my_events_stop_working_after_an_AJAX_request

使用 on() 委托(delegate) future 元素的处理程序

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