Question

我有一个带有选择选项和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) { ...

您尝试过这样吗？

jQuery POST后，单击处理程序不起作用

3 个答案: