jQuery: reinit selector function when dynamically adding elements to DOM
Hello, all,
I'm using jQuery for many things on a page with a form, and I've encountered something that I'm not quite sure what the best way to approach it is.
For example, I'm using .clone() on a small section of the form (it's a cost estimate form in which the user can dynamically add items to the form) and part of the section contains checkboxes. Depending upon which checkboxes are checked, certain selects (initially disabled) will become enabled and the user prompted to choose an option. (Five checkboxes, four selects.)
At the bottom of the page, I have the following code to perform the above functionality whenever a checkbox is checked or unchecked:
$('.airLiner').on('click',function(){setRateType();}); // it just calls a function whenever a checkbox is changed.
The function has a lot of code, so for brevity I won't post all of it:
function setRateType(){
for(var x = 0; x < cdLen; x++){
var $selectedCksList = $('[name=airLiner-' + x + ']:checked').map(function(i,el){return el.value;}).get().join(',');// Creates a comma-delimited list of values.
{switch/case: if itemA is found, enable select 'rateType' - else disable}
{switch/case: if itemB is found, enable select 'movementType' - else disable}
...
{switch/case: if itemG is found, enable select 'action' - else disable}
}
}
The issue is that if a user clicks the button to add an item, creating elements on the fly and adding to the DOM, the new checkboxes aren't initialized from when the page loads, like the first checkboxes are.
What is the best way to reinitialize, or whatever is best, the new checkboxes so that they are included in the onClick function?
Is this making sense?
V/r,
^ _ ^
AdChoices