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

在函数AnmodomRMA(e)中，e表示事件本身，而不是单击的按钮，请尝试使用e.target：

      var tr = $(e.target).closest("tr");

Answer 2

感谢所有帮助：)

这是我如何解决问题的方法：
-在输入字段中添加一个类。
-因为按钮在桌子外面，所以我必须选择桌子周围最近的元素，然后找到<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");

            }
        });

jQuery查找和最接近无法找到最接近的输入字段

2 个答案: