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

时间:2019-10-26 16:02:40

标签: javascript jquery

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

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

添加一些新的DOM时,您需要再次将事件挂钩。

答案 2 :(得分:0)

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

应该是

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

您尝试过这样吗?