dynamicfilterjqueryjquery-delegate

How can I filter some content added dynamically with jQuery?


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.


Solution

  • $(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++;
        }
    
    });