Question

我想阻止默认表单在动态生成的表单上提交行为，但是event.preventDefault（）;即使使用委托事件（.on）也不起作用。这是我的js代码：

$(document).ready(function() {
$("#add").click(function() {
    var intId = $("#buildyourform div").length + 1;
    var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/><br>");
    // I am adding 2 new forms there:
    var topic = $( '<form action = "#" method = "POST" name="new_topic" id="new_topic">'+ document.getElementById('csrf_token').value +
                  '<textarea  name="name" maxlength="1000" cols="25" rows="6" id="new_form"></textarea></form>'+
                  '<br><input type="submit" value="Submit" class="newMygt" />');


    var summary = $('<form action = "#" method = "POST" name="new_summary" id="new_summary">'+ document.getElementById('csrf_token').value +
                    '<textarea  name="content" maxlength="1000" cols="25" rows="6" id="new_form"></textarea></form>'+
                    '<br><input type="submit" value="Submit" class="newMygt" />');


    (topic).appendTo(fieldWrapper).show('slow');
    (summary).appendTo(fieldWrapper).show('slow');
    $("#buildyourform").append(fieldWrapper);


});

// after clicking the '.newMygt' button the form subitms...
$('.fieldwrapper').on("click", ".newMygt",function(e){
    e.preventDefault();
    a = JSON.stringify($('#new_topic, #new_summary').serializeObject()); // turn that "array or smth" into JSON
    alert(a)
});

}）;

我知道语法如下：

$（elements）.on（events，selector，data，handler）;

但显然我做错了，数据没有弹出。

修改：正确答案：

JohnP的评论：

修复此问题 - 您需要绑定到绑定完成时存在的元素。您绑定到表单，这是不正确的。绑定到容器

$('#buildyourform').on("click", ".newMygt",function(e){
..blah blah..

Answer 1

我列出了你需要修复的东西 - http://jsfiddle.net/a624W/1/

要解决的两个主要问题是

错误标记 - 您在多个地方使用了相同的ID，并且某些元素没有结束标记。
绑定 - 您使用错误的选择器绑定到元素。即使您修复了选择器，绑定发生时该元素也不存在。您需要绑定到父级。

复制以下代码。

$("#add").click(function () {
    var intId = $("#buildyourform div").length + 1;



    var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/><br>");
    // I am adding 2 new forms there:

    /** 
FIX THIS - You use the same ID for the form. You need to make those unique. Possibly the name as well. Both forms
**/
    var topic = $('<form action = "#" method = "POST" name="new_topic" id="new_topic">' + document.getElementById('csrf_token').value +
        '<textarea  name="name" maxlength="1000" cols="25" rows="6" id="new_form"></textarea>' +
        '<br><input type="submit" value="Submit" class="newMygt" /></form>');

    var summary = $('<form action = "#" method = "POST" name="new_summary" id="new_summary">' + document.getElementById('csrf_token').value +
        '<textarea  name="content" maxlength="1000" cols="25" rows="6" id="new_form"></textarea>' +
        '<br><input type="submit" value="Submit" class="newMygt" /></form>');
    /** 
FIX THIS - Missing closing tags for both the forms
**/


    (topic).appendTo(fieldWrapper).show('slow');
    (summary).appendTo(fieldWrapper).show('slow');
    $("#buildyourform").append(fieldWrapper);


});

// after clicking the '.newMygt' button the form subitms...
/** 
FIX THIS - You need to bind to an element that exists when the binding is done. You were binding to the form, which is incorrect. Bind to the container. 
**/
$('#buildyourform').on("click", ".newMygt", function (e) {
    e.preventDefault();
    a = JSON.stringify($('#new_topic, #new_summary').serialize()); //FIX THIS - The method is serizalize()
    alert(a)
});

Answer 2

首先，代码中使用了错误的选择器; “＃”用于ID，您打算使用的是“。”，用于选择类：

$('#fieldwrapper')

应该是

$('.fieldwrapper')

另外，应该注意的是没有关闭表单标签：

</form>

更新：

整体删除“fieldwrapper”，改为使用“document”：

$(document).on("click", ".newMygt",function(e){

意识到在加载页面后也插入了元素“fieldwrapper”，从而导致事件委托失败。

Javascript event.preventDefault（）;即使委派活动也不起作用

2 个答案: