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