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

【问题标题】：Jquery: Targeting dynamically loaded HTML elementsJquery：定位动态加载的 HTML 元素
【发布时间】：2014-03-31 21:24:55
【问题描述】：

我一直在绞尽脑汁想弄清楚为什么 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>

【问题讨论】：

"我应该使用 next()"，是的 next 就足够了。

标签： jquery dynamic selector elements targeting

【解决方案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 !

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

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

现在可以使用了。

感谢你们帮助我。

【讨论】：