typeError：form.serialize不是函數-我缺少什么

Question

我不確定我缺少什么，但是這段代碼拋出一個typeError：form.serialize不是一個函數

$('#paragraphsList').on('change', 'input', function (e) {
    e.preventDefault();
    var form = this.closest("form");
    console.log(form);
    console.log(form.serialize());

表單是動態創建的，但是form變量的console.log輸出顯示它正在查找正確的表單。

<ul id="paragraphsList">
<--dynamicaly generated content begins here-->
    <li>
        <form class="paragraphForm" name="80" id="80">
            <input id="81" name="activity"  value="a" class="paragraphs">
            <input id="82" name="task"      value="b" class="paragraphs">
            <input id="83" name="pStyle"    value="c" class="paragraphs">
            <input id="84" name="pContent"  value="d" class="paragraphs,style2">
        </form>
    </li>
    <li>
        <form class="paragraphForm" name="85" id="85">
            <input id="86" name="activity"  value="a" class="paragraphs">
            <input id="87" name="task"      value="b" class="paragraphs">
            <input id="88" name="pStyle"    value="c" class="paragraphs">
            <input id="89" name="pContent"  value="d" class="paragraphs,style2">
        </form>
    </li>
    .....

抱歉，更新太晚了。...這是一個完整的頁面，演示了該問題。 如果您查看控制台輸出，則on-change顯然是在正確的位置被調用的，並且具有正確的form對象，但是序列化調用仍然失敗。

<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
</head>

<body>
    <p onclick="load()">Load Forms</p>
    <ul id="paragraphsList">

    </ul>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function load() {
    $('#paragraphsList').empty();
    $('#paragraphsList').append(newForm("A", "step1", "task1", "myStyle1", "myContent1"));
    $('#paragraphsList').append(newForm("b", "step2", "task2", "myStyle2", "myContent2"));
    $('#paragraphsList').append(newForm("c", "step3", "task3", "myStyle3", "myContent3"));
    $('#paragraphsList').append(newForm("d", "step4", "task4", "myStyle4", "myContent4"));
}

function newForm(id, activity, task, pStyle, pContent) {
    var li = $('<li></li>');
    var form = $("<form></form>");
    form.attr("class", "paragraphForm");
    form.attr("name", id);
    form.attr("id", id);
    form.append(newField(id, "activity",    activity,   "paragraphs", "data" ));
    form.append(newField(id, "task",        task,       "paragraphs", "data" ));
    form.append(newField(id, "pStyle",      pStyle,     "paragraphs", "data" ));
    form.append(newField(id, "pContent",    pContent,   "paragraphs," + pStyle, "data"));
    form.change(function () {
        console.log(this);
        console.log(this.serialize());
    });
    li.append(form);
    return li;
}

function newField(id, name, value, style) {
    var input = $("<input>");
    input.attr("id", id + "." + name);
    input.attr("name", name);
    input.attr("value", value);
    input.attr("class", style);
    return input;
}

</script>
</html>

Answer 1

您正在使用的ID選擇paragraphsList ，這是你的表格上失蹤。 -啊，如果您證明它是摘要中的父項，那就太好了。

我認為您需要選擇輸入字段，然后在其上調用“單擊”。 這樣，“ this”將引用輸入字段，而不是表單的容器。

$('#paragraphsList > form > input')

Answer 2

可以解決此問題，如jquery serialize文檔中所述：

$( ".paragraphForm" ).on( "change", function( event ) {
  event.preventDefault();
  console.log( $( this ).serialize() );
});

https://api.jquery.com/serialize/

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>serialize demo</title>
  <style>
  body, select {
    font-size: 12px;
  }
  form {
    margin: 5px;
  }
  p {
    color: red;
    margin: 5px;
    font-size: 14px;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>

  <br>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>

  <br>
  <input type="checkbox" name="check" value="check1" id="ch1">
  <label for="ch1">check1</label>
  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
  <label for="ch2">check2</label>

  <br>
  <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2">
  <label for="r2">radio2</label>
</form>

<p><tt id="results"></tt></p>

<script>
  function showValues() {
    var str = $( "form" ).serialize();
    $( "#results" ).text( str );
  }
  $( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
  $( "select" ).on( "change", showValues );
  showValues();
</script>

</body>
</html>

Answer 3

上面的變量“ form”是“常規”對象，而不是DOM對象。 此代碼有效

console.log($(form).serialize());

當我希望它是一個DOM對象時，顯然this.closest（'form'）返回一個常規對象。 對於this和$（this）之間的區別以及為什么this.closest（“ form”）的響應不是DOM對象，我仍然感到困惑。 對此主題的任何澄清表示贊賞。

Answer 4

准備好聆聽動態內容

<ul id="paragraphsList">

</ul>


$(document).ready(function () {
    var form = $('<li><form class="paragraphForm" id="form1" name="80" id="80"><input id="81" name="activity"  value="a" class="paragraphs"><input id="82" name="task"      value="b" class="paragraphs"><input id="83" name="pStyle"    value="c" class="paragraphs"><input id="84" name="pContent"  value="d" class="paragraphs,style2"></form></li>');
    $('#paragraphsList').append(form);
    $("input").click(function () {
        alert('you clicked me');
        console.log($('form').serialize());
    });
});

這是動態創建的內容並正在監聽click事件。

typeError：form.serialize不是函數-我缺少什么

問題描述

4 個解決方案

解決方案1
2 2015-11-06 21:48:58

解決方案2
1 2015-11-06 21:48:15

解決方案3
1 2015-11-07 16:58:32

解決方案4
0 2015-11-06 22:46:28

typeError：form.serialize不是函數-我缺少什么

問題描述

4 個解決方案

解決方案1 2 2015-11-06 21:48:58

解決方案2 1 2015-11-06 21:48:15

解決方案3 1 2015-11-07 16:58:32

解決方案4 0 2015-11-06 22:46:28

解決方案1
2 2015-11-06 21:48:58

解決方案2
1 2015-11-06 21:48:15

解決方案3
1 2015-11-07 16:58:32

解決方案4
0 2015-11-06 22:46:28