在jQuery中提交一個動態創建的表單

Question

我想提交一個我動態創建的表單。我正在使用.submit，但它不起作用。這是我的代碼

var $message = $('.message'); 



$message.submit(function(e){ 
    console.log("Test"); 
}); 


$(document.body).on('click','.button', function(e) { 
    console.log($(this).val()); 
    var $input = ''; 
    $input = $('<p>Chat with '+$(this).val()+'</p>'); 
    $input.append('<div class = "chat" style="height:200px"></div>'); 
    $input.append('<form class="message">'); 
    $input.append('<input size = "35" class="messages">'); 
    $input.append("<br><input type='submit' class='send_message' value = 'Send' />"); 
    $input.append('</form>'); 

    $input.appendTo($("#contentWrap")); 
}); 

document.body的代碼創建了窗體。但是，當我點擊提交按鈕時，什麼都沒有發生。

我也試過

$('#contentWrap').on("submit", ".message", function(e){ 
      console.log("Test") 
}); 

$（父）。在（活動，兒童，功能）是大多數我讀的帖子要說到做到。但是，我一定在做別的事情。

這裏是JS提琴https://jsfiddle.net/55Ln0wgu/

Answer 1

的問題是，submit按鈕不是形式。您將每個<input>元素附加到<p>而不是<form>。結果等同於此HTML，其中有一個空的<form>。

<p>Chat with 
    <div class="chat" style="height:200px"></div> 
    <form class="message"></form> 
    <input size="35" class="messages"><br> 
    <input type="submit" class="send_message" value="Send"> 
</p> 

記住，.append()運行在DOM層次結構，它沒有連接字符串的HTML。

如果您將$input作爲字符串構建，那麼您的代碼就可以工作。

您還需要爲提交按鈕使用事件委託，因爲它是動態添加的。

$(document.body).on('click', '.button', function(e) { 
 
    console.log($(this).val()); 
 
    var $input = '<p>Chat with ' + $(this).val(); 
 
    $input += '<div class = "chat" style="height:200px"></div>'; 
 
    $input += '<form class="message">'; 
 
    $input += '<input size = "35" class="messages">'; 
 
    $input += "<br><input type='submit' class='send_message' value = 'Send' />"; 
 
    $input += '</form></p>'; 
 

 
    $("#contentWrap").append($input); 
 
}); 
 

 
$('#contentWrap').on("submit", ".message", function(e) { 
 
    alert("Test"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Form should appear here: 
 
<div id="contentWrap"> 
 

 
</div> 
 
Chat with: 
 
<input type="button" class="button" value="Fred"> 
 
<input type="button" class="button" value="Joe">

Answer 2

填充前端代碼試試這個

$('#contentWrap').on('click', '.button', function(e) { 
    console.log($(this).val()); `