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

我有一个动态添加到bootstrap远程模式的表单，并且希望连接到submit事件，这样我就可以阻止提交并执行ajax提交。我通常使用委托的处理程序

$（“#somePermanentParentElement”）执行此操作

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



$（函数（）{
$（“#btn_addrow”）。在（“单击”，函数（）{
$（“#待定列表”）。前置(
" ");
});
$（“#testcontainer”）。在（“提交”，“.frm#u添加”，函数（事件）{
console.log（'test'）；
event.preventDefault（）；
警报（“测试”）；
/*$.ajax函数将转到此处保存行*/
});
})；//准备好了吗
Roamer-1888是正确的

您可以在element inspector中检查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>

您可以尝试另一个选项，即：

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>


$（文档）.ready（函数（）{
$（“#btn_addrow”）。在（“单击”，函数（）{
var text=“”；
文本+=”；
文本+=”；
文本+=”；
文本+=”；
文本+=”；
$（“#待定列表”）。前置（文本）；
});
//1:id=“提交”添加到表单提交按钮
//2：在表单提交按钮的单击事件中触发表单提交事件
$（'body'）。委托（'submit'，'click'，函数（事件）{
log（'单击提交按钮'）；
//3：定义触发表单提交事件时要执行的操作
$（'#testcontainer'）。提交（函数（）{
console.log（“提交的表单”）；
返回false；
});
//下面的表单提交事件被触发
$（'#testcontainer'）。提交（）；
log（“触发表单提交事件”）；
返回false；
/*$.ajax函数将转到此处保存行*/
});
});

以下是JSFIDLE示例：
它可能由于非法HTML而无法工作。
元素只能有
和
元素。浏览器将尽最大努力呈现您的内容，但可能会将您的
放在其他地方-可能在表外。请尝试将
移动到
中e> 。看起来我的小提琴的格式不好，实际上与我遇到的问题不同。通过您和Roamer的输入，我能够修复小提琴，将标记为答案，因为您使用小提琴识别了问题。更新小提琴只是为了演示使用格式更好的标记的作品：
<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>