jquery - jQuery - 动态添加元素的 DomReady 事件

Question

我正在动态加载 HTML 内容，特别是一个元素。由于选项数量众多，所有选项都以 JSON 数组的形式传输给客户端一次，然后应由客户端的浏览器填充。为此，我想将一个事件附加到所有<select>元素，这会创建一堆<option>元素并根据元素中的标准选择其中一个<select>。

这个JSFiddle展示了我如何通过单击选择元素来实现我想要的。但是，我想创建选项标签并在元素为 DOMReady 时显示所选索引 - 但我找不到适用于该元素的事件。

Answer 1

你可以这样做：

http://jsfiddle.net/LXVhu/2/

将刚刚附加到 dom 的元素存储在一个变量中，然后调用一个函数用这个变量填充它们。

function populateSelect(elmt) {
var select = elmt;
    $(countries).each(function(i) {
        var option = $("<option></option>").attr("value", this.Key).text(this.Value.EnglishName);
        if (this.Key === select.data('selected')) option.prop("selected", true);
        select.append(option);
        select.get().selectedIndex = i;
    });    
}

$('#test').click(function() {
    // this select field will not be populated!
    var elmt = $('<select data-selected="USA" class="countrylist"></select>').appendTo("body");
    populateSelect(elmt);
});

Answer 2

Change your click handler as follows.

$('#test').click(function() {
        // this select field will not be populated!
        var select = $('<select data-selected="USA" class="countrylist"></select>').appendTo("body");


        $(countries).each(function(i) {
            var option = $("<option></option>").attr("value", this.Key).text(this.Value.EnglishName);
            if (this.Key === select.data('selected')) option.prop("selected", true);
            select.append(option);
            select.get().selectedIndex = i;
        });
    });

Answer 3

我设法通过在添加元素时手动调用我绑定的事件找到了一种方法：

// Instead of having to "click" the select fields
// I'd like to populate the <option> tags everytime a new select item is injected into the DOM.
$(document).on("click", "select.countrylist", function() {
    var select = $(this);
    $(countries).each(function(i) {
        var option = $("<option></option>").attr("value", this.Key).text(this.Value.EnglishName);
        if (this.Key === select.data('selected')) option.prop("selected", true);
        select.append(option);
        select.get().selectedIndex = i;
    });
});
// populate all existing selects
$("select.countrylist").click();

// create new select and populate it
$('#test').click(function() {
    var x = $('<select data-selected="USA" class="countrylist"></select>').appendTo("body");
    // manually trigger a click which causes populating of select
    x.click();
});

有关工作示例，请参阅此 JSFiddle

请注意，您仍然需要将 click 事件绑定到 $(document)，而不是 select 本身（它不起作用）。

感谢大家的帮助！