Question

我有一个动态添加到引导程序远程模式的表单，并希望连接到提交事件，以便我可以阻止提交并执行ajax提交。我通常使用委派的处理程序$('#somePermanentParentElement').on('submit', '#myDynamicallyAddedForm', function()

执行此操作

我不太确定在这种情况下出了什么问题。事件似乎没有触发，控制台日志消息和警报都不会出现。我有一个小提琴演示了这个问题（在Chrome 40.0.2214.115 m 64bit中）。

https://jsfiddle.net/9A6pf/5/

<table id='testcontainer'>
    <tr id=tbl_list></tr>
</table>
<input type=button id=btn_addrow value="OK">

<script type='javascript'>
$(function(){
  $("#btn_addrow").on("click", function () {
      $("#tbl_list").prepend(
          "<tr><form class='frm_add'><td><input type='text' name='date'> </td><td><input type='text' name='note'></td><td><input type='submit' value='add row'></td></form></tr>");

  });

  $("#testcontainer").on("submit", ".frm_add", function (event){
     console.log('test');
     event.preventDefault();
     alert('test');
     /* $.ajax function will go here to save row */
  });

});// doc ready
</script>

Answer 1

Roamer-1888是对的。

您可以在元素检查器中检查Chrome是否在其外部呈现表单内容：

<tr id="tbl_list">
    <tr>
        <form class="frm_add">
        </form>
        <td>
            <input type="text" name="date"> 
        </td>
        <td>
            <input type="text" name="note">
        </td>
        <td>
            <input type="submit" value="add row">
        </td>
    </tr>
</tr>

Answer 2

您可以尝试其他选项：

1：为表单提交按钮

提供ID

2：在表单提交按钮

的点击事件中触发表单提交事件

3：定义触发表单提交事件时要执行的操作，定义必须在提交按钮单击事件内部，因为一旦我们单击提交按钮就会提交表单

所以你的意思可以是这样的：

<table id='test'>
    <tr id="tbl_list"></tr>
</table>
<input type="button" id="btn_addrow" value="OK">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#btn_addrow").on("click", function () {
        var text = "<tr>";
            text += "<form class='frm_add' id='testcontainer'>";
            text += "<td><input type='text' name='date'> </td>";
            text += "<td><input type='text' name='note'></td>";
            text += "<td><input type='submit' value='add row' id='submit'></td>";
            text += "</form></tr>";
        $("#tbl_list").prepend(text);

    });


    // 1: id="submit" is added to the form submit button

    // 2: fire the form submit event within the click event of the form submit button

    $('body').delegate('#submit','click',function(event){   
        console.log('submit button is clicked');

        // 3: define the actions to do when the form submit event is fired  
        $('#testcontainer').submit(function(){
            console.log('form submitted');
            return false;
        });

        // below the form submit event is fired 
        $('#testcontainer').submit();
        console.log('form submit event is fired ');

        return false;
       /* $.ajax function will go here to save row */   
    });

});
</script>

这里是jsfiddle示例：jsfiddle

委托表单提交事件不起作用？

2 个答案: