Jquery: Targeting dynamically loaded HTML elements

Question

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>

Answer 1

I honestly don't know why it's not working. I've tried all your examples but no luck. Instead I've had to do a little work around.

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

And it works now.

Thank you guys for trying to help me.

Answer 2

You could call your function validate when submitting the form and prevent its default behavior :

• Write return validate('form_a'); to your form's onsubmit event
• Change your button "Go" to a submit input

So you should get:

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

It should work fine even if the elements were created dynamically.

Try changing the onclick handler to onclick="return validate('form_a')" (i.e. add return). This way when validate fails, the handler will return false, and stop the default action of the button. The default action is likely to submit the form. Since your form doesn't define an action, it would just reload your page, but it makes it seem like nothing worked.

Answer 4

This might work :

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