JQUERY DOM: Select Elements Created After Dom Load

Question

I am working on a project where I need to change the value of all select inputs of a certain class when a function is called. The problem is some of the select inputs do not exist when the dom is first loaded, they are created dynamically via Javascript.

The function works fine for selecting all the select inputs that exist when the page was loaded, but does not work for any select inputs that were added to the dom dynamically.

I understand event binding with .on but in this particular case I am not trying to key off of an event like click. I want to get all elements of this class when this function is called.

Here is the code I am using to create the new select elements.

var this_cell = document.getElementById('produce_batch_line_td['+x+']');

var new_select = document.createElement("select");

new_select.name = "produce_batch_line["+x+"]";
new_select.id = "produce_batch_line["+x+"]";        
new_select.className = "produce_batch_line["+invoice_number+"]";

this_cell.appendChild(new_select);

var new_option = document.createElement("option");
new_option.text = "test";
new_option.value = "test";  
new_select.add(new_option);

Here is the code I am using to select all select elements of this class.

function SetDetailValue(invoice_number, obj) {

    $(".produce_batch_line\\["+invoice_number+"\\]").each(function() { 

        this.value = obj.value; 

    });

}

How can I get items of this class added to the dom dynamically?

Answer 1

Check this link. I have put one that already exist. And when you click add button it creates dynamicly as well. When you Click the set button it finds them with a java query and puts them into a for loop that changes each ones value one by one.

http://cr8code.co/editor.php?workid=1a446530189d751d0b15ce104a286eee

Here is the DEMO