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")
});

$（parent）.on（event，child，function）是我读过的大多数帖子所说的。但是，我必须做错其他事。

以下是js fiddle 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构建为字符串，则代码将起作用。

您还需要为“提交”按钮使用事件委派，因为它是动态添加的。

＆＃13;

$(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");
});

＆＃13;

<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">

＆＃13;

Answer 2

试试这个

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

在jQuery中提交动态创建的表单

2 个答案: