1

I've been racking by brains trying to figure out why jQuery wasn't responding. But I've figured out why it's because my form below is dynamically created by javascript and not inside DOM.

If I use $(this).css("border", "1px solid red"); to target the input text field, it works and has an effect but when I use the next() it seems to not find it, I think because it's dynamic HTML.

How do I target element?

<!-- 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>
4

4 回答 4

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>

这是一个用于测试的小提琴！

于 2014-02-28T04:07:44.210 回答
0

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

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

它现在有效。

谢谢你们试图帮助我。

于 2014-03-02T21:39:00.860 回答
0

这可能有效：

      //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>
于 2014-02-28T04:18:35.910 回答
0

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

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

于 2014-02-28T03:55:41.017 回答