Javascript event.preventDefault（）; 即使使用委托事件也不起作用

debugcn 发表于 Dev

Eimantas

我想防止默认表单在动态生成的表单上的提交行为，但是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（事件，选择器，数据，处理程序）;

但是看来我在做错事，并且数据没有弹出。

编辑：正确答案：

JohnP的评论：

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

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

约翰·P

我在此小提琴中列出了您需要修复的内容-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)
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。