JQUERY DOM：选择DOM加载后创建的元素 [英] JQUERY DOM: Select Elements Created After Dom Load

问题描述

我正在研究一个项目，我需要在调用某个函数时更改某个类的所有选择输入的值。问题是一些select输入在dom第一次加载时不存在，它们是通过Javascript动态创建的。

该函数对于选择所有选择输入当页面加载时存在，但不适用于动态添加到dom的任何选择输入。

我理解与.on的事件绑定，但在这个特定案例我不是想要关闭像点击这样的事件。我想在调用这个函数时获得这个类的所有元素。

这是我用来创建新选择元素的代码。

  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）; 
  

这里是我用来选择这个类的所有选择元素的代码。

 函数SetDetailValue（invoice_number，obj）{
 
 $（。produce_batch_line \\ [+ invoice_number +\\ \\\]）。each（function（）{
 
 this.value = obj.value; 
 
}）; 
 
} 
  

如何将此类的项目添加到dom动态？

解决方案

检查此链接。我已经把一个已经存在的。当你点击添加按钮时，它也会动态地创建。当你点击set按钮时，它会用java查询找到它们，并将它们放入for循环，逐个更改每个值。

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

以下是 DEMO

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?

解决方案

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

这篇关于JQUERY DOM：选择DOM加载后创建的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！