单击处理程序在 Jquery POST 后不起作用

Question

我有一个带有 Select 选项和 FORM 的网页，当用户更改选择时， 我的 jquery 脚本函数将动态执行 ajax POST 以用不同的表单（新表单元素）替换原始表单。

但我注意到 Click 处理程序（$(button).click() 事件）不适用于新生成的表单。 请在这方面提供帮助。

这是 Jquery 中的一个已知问题吗？？

<select id=choice><option>....</select>
<div class=mytable>
<form id='dataform-10'>
.....
<button id="edit-10"></button>
</form>
<div>
<script>
  $(function(){
  $("#choice").change(function(){
    $.get('/portal/go?id='+this.value, function(data, status){ 
            //$(".mytable").hide();
            $(".mytable").html(data);
            $(".mytable").show();
          });
  });
});
</script>
<script>
$('[id^=edit]').on("click",function(e) {
    e.preventDefault();
   var num = this.id.slice(5);   
   var fdata = $('#dataform-'+num).serialize();
   $.post('/portal/update', fdata, function(data, status){ 
            alert(data);
          });
});
</script>

Answer 1

正如@sh977218 所指出的，click 事件不起作用的原因是在事件处理程序的初始标记之后在 DOM 中添加了新元素。试试这样的：

<script>
function clickEventHandler(event) {
  // code for click event 
   event.preventDefault();
   var num = event.target.id.slice(5);   
   var fdata = $('#dataform-'+num).serialize();
   $.post('/portal/update', fdata, function(data, status){ 
        alert(data);
      });
}
$('[id^=edit]').on("click", function(e){clickEventHandler(e);});
$("#choice").change(function(){
  $.get('/portal/go?id='+this.value, function(data, status){ 
        //$(".mytable").hide();
        $(".mytable").html(data);
        $(".mytable").show();
        $('[id^=edit]').on("click", function(e){clickEventHandler(e);});
      });
});
</script>

Answer 2

当你添加一些新的 DOM 时，你需要再次钩住它的事件。

Answer 3

...$('[id^=edit]').on("click",function(e) {...

应该是

...$(".mytable").on("click", "[id^=edit]", function(e) {...

你试过这样吗？