JQuery $(this).find(Selector) 返回这个

Question

我有一个定义为这个的表单

<form name="NewForm">
    <td hidden>New</td>
    <td><input name="name" type="text"></td>
    <td><input name="url" type="url"></td>
    <td><input type="submit" value="New"></td>
    <td><input type="reset" value="Cancel"></td>
</form>

提交后我调用

function submitForm(event,data)
{
    console.log($(this));


    var valid = true;
    var changed = false

    var input = $(this).find("input[name='name']");

    console.log("Name");
    console.log(input);
    console.log(input.val());
    console.log(input.prop( 'defaultValue' ));
}

然后控制台报告

Object { 0: <form>, context: <form>, length: 1 }
Name
Object { length: 0, prevObject: Object, context: <form>, selector: "input[name='name']" }
undefined
undefined

为什么我不选择名为 name 的表单上的第一个输入？

编辑：整个代码文件

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
    <div>
        <select id="SystemActive">
            <option value="Y">Active</option>
            <option value="N">Deleted</option>
        </select>
        <button id="SystemRefresh">Refresh</button><br>
        <table id="SystemTable" class="resultsGrid">
            <thead>
                <tr>
                    <th hidden>ID</th>
                    <th>Name</th>
                    <th>URL</th>
                </tr>
                <tr >
                    <form name="NewForm">
                        <td hidden>New</td>
                        <td><input name="name" type="text"></input></td>
                        <td><input name="url" type="url"></input></td>
                        <td><input type="submit" value="New"></input></td>
                        <td><input type="reset" value="Cancel"></input></td>
                    </form>
                </tr>
            </thead>
        </table>
    </div>
    <script>
        $(function() {
            $("form").submit(submitForm)
        });

        function submitForm(event,data)
        {
            console.log($(event.target));


            var valid = true;
            var changed = false

            var input = $(this).find("input[name=name]");
            console.log("Name");
            console.log(input);
            console.log($(input).val());
            input = $(this).find("input[name='name']");
            console.log("Name2");
            console.log(input);
            console.log($(input).val());
            input = $(this).find("input[name='name']");
            console.log("Name3");
            console.log(input.attr('name'));

            event.preventDefault();
            return false;
        }

    </script>

</html>

Answer 1

您确实 select 使用语句 var input = $(this).find("input[name='name']"); 输入名为 'name' 的第一个输入元素。它按预期工作。请参阅以下内容，我可以 select 名称为 'name' 的第一个输入元素并打印其属性。

$('[name="NewForm"]').submit(function( event ) {
   var input = $(this).find("input[name='name']");
  console.log(input.attr('name'));
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="NewForm">
    <td hidden>New</td>
    <td><input name="name" type="text"></td>
    <td><input name="url" type="url"></td>
    <td><input type="submit" value="New"></td>
    <td><input type="reset" value="Cancel"></td>
</form>

Answer 2

当我将您的表单标签移出 table 时，它开始工作了。

     <form name="NewForm">
        <table id="SystemTable" class="resultsGrid">
            <thead>
                <tr>
                    <th hidden>ID</th>
                    <th>Name</th>
                    <th>URL</th>
                </tr>
                <tr >

                        <td hidden>New</td>
                        <td><input name="name" type="text" /></td>
                        <td><input name="url" type="url" /></td>
                        <td><input type="submit" value="New" /></td>
                        <td><input type="reset" value="Cancel" /></td>

                </tr>
            </thead>
           </table>
        </form>

Answer 3

问题是因为 form 不是 tr 标签的有效子标签。只有 td 或 th 可以是 tr 标签的子标签。浏览器会尝试修复损坏的 HTML 并且修复不正确（关于您最初的意图），这就是代码未按预期工作的原因。

要么将您的表单标记移到 table 元素之外，要么将其嵌套在 td

中

只需右键单击并 inspect 您的提交元素，您将看到浏览器已修复您的 form 标签成为没有子元素的元素.

Answer 4

实际上是错误的标记。您将 form 放在 tr 中。将 form 移动到 table 之前并在之后关闭它，代码应该可以正常工作。

有效的更新代码位于此 JSFiddle：https://jsfiddle.net/xq940hf1/

JQuery $(this).find(Selector) 返回这个

JQuery $(this).find(Selector) returning this

jquery

selector