Jquery: нацеливание динамически загружаемых элементов HTML

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

Я, честно говоря, не знаю, почему это не работает. Я испробовал все ваши примеры, но не повезло. Вместо этого мне пришлось немного поработать.

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

И это работает сейчас.

Спасибо, ребята, за попытку помочь мне.

Answer 2

Вы могли бы вызвать свою функцию 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>

Вот скрипка для тестирования!

Answer 3

Он должен работать нормально, даже если элементы были созданы динамически.

Попробуйте изменить обработчик onclick на onclick="return validate('form_a')" (т.е. добавить return). Таким образом, когда валидация завершится неудачно, обработчик вернет false и остановит действие кнопки по умолчанию. Действие по умолчанию, скорее всего, отправить форму. Поскольку ваша форма не определяет действие, она просто перезагрузит страницу, но кажется, что ничего не работает.

Answer 4

Это может сработать:

      //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>