javascript - JQuery find and closest 无法找到最近的输入字段

Question

我通过 Ajax 动态循环一些数据，然后将它们显示在表格中。如您所见，我有多行或 <tr> 、HeaderLine 和 Customerinfo。我感兴趣的是 CustomerInfo我正在尝试做的事情是单击按钮时，检查哪些输入字段为空或没有值而不是发出警报并查找输入字段或元素我使用 jQuery find()和 closest()方法，但由于某种原因它找不到任何元素。

谁能帮我解决这个问题？

用于在发送到服务器之前检查空输入字段的 JavaScript:

<script>
    function AnmodomRMA(e) {

        var tr = $(e).closest("table").find(".CustomerInfo");
        var email = tr.find('input.Email').val();
        var telefon = tr.find('input.Telefonnummer').val();

        if (email === "") {
            alert("Input is Empty:" + email);
            return false;
        }
        if (telefon === "") {
            alert("Input is Empty:" + telefon);
            return false;
        }

        var formdata = $("select, textarea,input").serializeArray();

        $.ajax({
            "url": '@Url.Action("AutoRMAAnmoding", "User")',
            "method": "POST",
            "data": formdata,
            "dataType": "json",
            success: function (data) {
                console.log(data);
            },

            error: function () {
                console.log('something went wrong - debug it!');
            }

        });
    }
</script>

用于加载数据(动态加载到表中)的 JavaScript:

<div class="card-body">
    <table class="table">
        <tbody id="ResultProduct"></tbody>

    </table>
        <div id="AppendBtnRMA">

        </div>

</div>

<script>
    $.ajax({
        type: "GET",
        url: "/User/serializeItemLineByID" + 1,
        dataType: 'json',
        success: function (result) {

            $.each(result.findclosedorders, function (ii, e) {
                var guid = uuidv4();

                rows += '<tr class="HeaderLine">';
                rows += '<td>some data</td>';
                rows += '</tr>';

                rows += '<tr class="CustomerInfo">'
                rows += '<input type="hidden" name="model.InsertRMALists.Index" value="' + guid + '" />';
                rows += '<td><label>Telefonnummer</label><input name="model.InsertRMALists[' + guid + '].Telefonnummer" id="Telefonnummer" type="tel"></td>';
                rows += '<td><label>E-mail</label><input name="model.InsertRMALists[' + guid + '].Email" id="Email" type="text"></td>';
                rows += '</tr>';

            });
            var btnAppend = "";
            btnAppend += '<button onclick="AnmodomRMA(this);">Create RMA</button>';

            $("#AppendBtnRMA").append(btnAppend);
            $("#ResultProduct").append(rows);
        },
    })
</script>

Answer 1

感谢所有帮助:)

以下是我是如何解决这些问题的:
- 为输入字段添加一个类。
- 因为按钮在 table 外面，我必须选择 table 周围最近的元素，而不是找到 <tr>喜欢:

 var tr = $(e).closest(".card-body").find("tr.section");

然后循环遍历我想检查它是否为空的元素:

$(tr).each(function (i, el) {
            var t = $(el).find('input.Telefonnummer').val();
            if (t ==="") {
                alert("empty");

            }
        });