jQuery - событие DomReady для динамически добавленных элементов

Question

Я загружаю HTML-контент динамически, в частности элемент. Из-за большого количества опций все параметры передаются клиентам один раз в массиве JSON и затем заполняются браузером клиентов. Для этого я хотел бы связать событие со всеми элементами <select>, которое создает группу из <option> элементов и выбирает один из них на основе критериев из элемента <select>.

Этот JSFiddle показывает, как я могу добиться того, что хочу, щелкнув элемент select. Тем не менее, я хотел бы создать теги параметров и показать выбранный индекс, если элемент DOMReady, но я не могу найти событие, которое относится к нему.

Answer 1

мне удалось найти путь вручную вызывая событие я связывающийся с при добавлении элементов:

// 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(); 
}); 

See this JSFiddle for a working example

Примечание вам все еще нужно привязать нажмите на событие $ (document), а не на сам выбор (он не будет работать).

Спасибо за помощь!

Answer 2

Вы могли бы сделать это вместо:

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

магазин элемент просто добавляется к йот в переменной, а затем вызвать функцию, населяя их с помощью этой переменной.

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 3

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; 
     }); 
    });