Question

我一直绞尽脑汁试图找出jQuery没有响应的原因。但我已经弄明白为什么这是因为我的表单是由javascript动态创建的，而不是在DOM内部。

如果我使用$(this).css("border", "1px solid red");来定位输入文本字段，它会起作用并产生效果但是当我使用next()它似乎找不到它时，我认为因为它是动态HTML。

如何定位元素？

<!-- Pretend this modal box is empty. The <form> is dynamically loaded when a button is clicked -->
<div id="modal_box">
    <form id="form_a">
        <input type="text"><b></b>
        <input type="text" class="required"><b></b>
        <input type="text"><b></b>
        <br>
        <button onclick="validate('form_a')"> Go </button>
    </form>
</div>

<script>
function validate(whichform) {
    var valid = true;

    // whichform is the id so use id selector here
    $('#' + whichform + " .required").each(function (i) { 
        if ($(this).val().length == 0) {
            $(this).css("border", "1px solid red");
            $(this).next("b").html("Required field");// should I be using next()? or something else to find dynamically loaded HTML elements?
            valid = false
        }
        else {
            $(this).css("border", "1px solid black");
            $(this).next("b").html("");
        }
    });

    // Return the valid state
    return valid;
}
</script>

Answer 1

您可以在提交表单时调用您的函数validate并阻止其默认行为：

将return validate('form_a');写入表单的onsubmit活动
将按钮“转到”更改为提交输入

所以你应该得到：

<form id="form_a" onsubmit="return validate('form_a');">
    <input type="text" method="post"><b></b>
    <input type="text" class="required"><b></b><input type="text"><b></b>
    <br>
    <input type="submit" value="Go"/>
</form>

Here's a Fiddle for testing !

Answer 2

即使元素是动态创建的，它也应该可以正常工作。

尝试将onclick处理程序更改为onclick="return validate('form_a')"（即添加return）。这样，当验证失败时，处理程序将返回false，并停止按钮的默认操作。默认操作可能是提交表单。由于你的表单没有定义一个动作，它只会重新加载你的页面，但它似乎没有任何效果。

Answer 3

这可能有效：

      //pretend this modal box is empty. The <form> is dynamically loaded when a button is clicked
    <div id="modal_box">
     <form id="form_a">
     <input type="text"><b></b>
     <input type="text" class="required"><b></b>
     <input type="text"><b></b>
       <br><button > Go </button>
     </form>
    </div>

    <script>
    $("body").on('submit', '#form_a', function() {
        var valid = true;
        // whichform is the id so use id selector here
        $('#' + whichform + " .required").each(function (i) {

            if ($(this).val().length == 0) {
                $(this).css("border", "1px solid red");
                $(this).next("b").html("Required field");// should I be using next()? or something else to find dynamically loaded HTML elements?
                valid = false
            }
            else {
                $(this).css("border", "1px solid black");
                $(this).next("b").html("");
            }
        });
        //return the valid state

        return valid;

    });

    </script>

Answer 4

老实说，我不知道为什么它不起作用。我已经尝试了所有的例子，但没有运气。相反，我不得不做一些工作。

$(this).nextAll("b").eq(0).html("Required field");

它现在有效。

谢谢你们帮助我。

Jquery：定位动态加载的HTML元素

4 个答案: