在文档中添加新元素后,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 Docs FAQ部分:Why_do_my_events_stop_working_after_an_AJAX_request

使用on()为将来的元素委托处理程序

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