How can I filter some content added dynamically with jQuery?

Question

First of all, sorry for my english, I'm still learning :).

My problem is the next, I have added some HTML content dinamically with jQuery, specifically these inputs:

<td id="date"><input type="text" id="input_1" class="select" /></td>
<td id="date"><input type="text" id="input_2" class="select" /></td>
<td id="date"><input type="text" id="input_3" class="select" /></td>
<td id="date"><input type="text" id="input_4" class="select" /></td>
<td id="date"><input type="text" id="input_X" class="select" /></td>

The number of inputs depends how many register I have in my DB.

For the another hand, I have this code in jQuery that I used with the same content but it wasn't added dynamically. I tried to execute this script after add the content above:

$('input')
    .filter(function() {
    return this.id.match(/input_./);
})
.foo({
    ....
});

When I try to apply the same script with the dynamically content it doesn't work, it doesn't match anything.

I read about delegate() and live() method but I didn't understand how can use them in my situation because all the examples I saw it was for handlers events.

Anybody knows how can I solve this problem.

Thanks in advance.

It would be a good idea to name your inputs separately or call it "fecha_fin[]" else you will have post back issues. Then need more clarity on what and when you are trying to filter... Eg: when option A is click this should be filter or on page load this needs to be filtered... — We0, Aug 12 '13 at 09:49
Thanks for the advise, I remove the input's names because I don't really need them. About the script, I intend to get all the inputs, one by one to work with them in the `foo()` function. As I said, that script it works for me but only with static content. — Yonirt, Aug 12 '13 at 10:13

Nabil Kadimi · Accepted Answer · 2014-11-27T22:41:36.727

0

$(document).on('change', 'input[id^=input_]', function() {
    /* Do stuff */
});

So you could do something like this demo

// Wrap inside a document ready
// Read .on() docs (To ensure the elements...bla bla)
$(document).ready( function () {

    input_index = 0;

    setInterval(addInput, 1000);

    $(document).on('change', 'input[id^=input_]', function() {
        $(this).val($(this).attr('id'));
    });

    function addInput () { 
        $('<input type="text" id="input_'+input_index+'"/>')
          .appendTo('#empty')
          .change();   // <============================ Pay attention to this
        input_index++;
    }

});

edited Nov 27 '14 at 22:41

answered Aug 12 '13 at 09:47

Nabil Kadimi

10,078
2
51
58

I try to use that but it doesn't works. When the document change ( after add dynamically content) the script doesn't execute, I could check it in the debuggin tool and only works when I load the page with the browser. – Yonirt Aug 12 '13 at 10:16
Yes, that works! But there is a little diference, the function `addInput()` add `` elements, in my case I add ``. I realize that if it isn't the same kind of element that is put in the `change` handler, this doesn't trigger. How can I change the script to recognize the pairs of elements but only get the input element in the handler like in your script. Thanks! – Yonirt Aug 12 '13 at 11:25
Yes it works! Of course with `.find()` instruction I can do that, your are a master! Thanks for your help. – Yonirt Aug 12 '13 at 21:23

How can I filter some content added dynamically with jQuery?

1 Answers1