0

I have a function to manipulate class names -

function detectInputs() {
    $(".myform").find("input.input-text").filter(function() {
        if( $(this).val().length === 0 ) {
            $(this).closest( "p.form-row" ).removeClass("parent-filled");
            $(this).closest( "p.form-row" ).addClass("parent-empty");
        } else {
            $(this).closest( "p.form-row" ).removeClass("parent-empty");
            $(this).closest( "p.form-row" ).addClass("parent-filled");
        };
    });
}

But it only works on elements that are already present when the page loads. More p.form-row elements can be added dynamically. I know about .on() but not sure where it would integrate with this function.

Oratorio Tangram
  • 58
  • 4
  • use as `$(document).find(".myform").find(""input.input-text")`... – Devsi Odedra Apr 05 '21 at 13:14
  • Hi, welcome to SO. Please do read the [tour] and [ask]. In this case, you'll need to include how you call `detectInputs` and possibly some HTML that shows your selector is otherwise correct. – freedomn-m Apr 05 '21 at 13:21
  • Whether they are dynamically added or not doesn't matter for `.find()` - there's no need for "*find delegation*" (whatever that might be) as suggested by the previous comment and reference to `.on`. *Assuming* the selector is correct, it's about when the code is run. Which you've not included. It's highly likely you're running your code *before* you've added the "dynamically added elements*". The only way to prove this is for you to provide a snippet that demonstrates the issue. Otherwise it's just guess work and could be just that your selector is incorrect. – freedomn-m Apr 05 '21 at 13:21
  • @freedomn-m I made a quick [jsfiddle](https://jsfiddle.net/wtokqf5z/2/) – Oratorio Tangram Apr 05 '21 at 13:35
  • In your fiddle, your issue is this line `$( "input.input-text" ).on( "blur", function() {` - which you didn't include in the question. Change it to `$(document).on("blur", "input.input-text", detectInputs);`. Nothing to do with the `.find()` – freedomn-m Apr 05 '21 at 13:40
  • @freedomn-m that was it, thank you very much! – Oratorio Tangram Apr 05 '21 at 13:44

2 Answers2

0

May be because of you calling the function before the element has been added. try calling this when ever you dynamically add an element it will work fine.

as of Your code :-

    function detectInputs() {
        $("body").find("input.input-text").filter(function() {
            if( $(this).val().length === 0 ) {
                $(this).closest( "p.form-row" ).removeClass("parent-filled");
                $(this).closest( "p.form-row" ).addClass("parent-empty");
            } else {
                $(this).closest( "p.form-row" ).removeClass("parent-empty");
                $(this).closest( "p.form-row" ).addClass("parent-filled");
            }
        });
    }
    
  

$("button").on( "click", function() {
  $("p").last().after('<p class="form-row"><input class="input-text" type="text"></p>');    
  detectInputs();
});
Toxy
  • 696
  • 5
  • 9
0

Trigger an event after adding new elements "p.form-row" and bind event listener using "on" where the callback will be your function "detectInputs"

beena
  • 91
  • 1
  • 3