javascript - 点击处理程序在 Jquery POST 后不起作用

Question

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

但我注意到点击处理程序($(按钮).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 所指出的，点击事件不起作用的原因是在事件处理程序的初始标记之后在 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>