Добавить событие click в динамический список в динамическом сворачиваемом div

Question

Я хочу добавить сворачиваемый div со списком в ui-block, и я хочу, чтобы события click для элементов li. У меня есть UI-сетка, как это:

<div class="ui-block-b" id="right"> 
    <h3>Test</h3> 
</div> 

Затем я использую этот код Javascript, чтобы добавить разборный DIV со списком в нем к сетке.

var div = '<div data-role="collapsible"><h3>Handy</h3></div>'; 
var list = '<ul class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true" data-role="listview"</ul>'; 
var li = '<li>Samsung</li>'; 
list = $(list).append(li); 
li = '<li>Apple</li>'; 
list = $(list).append(li); 
$(list).appendTo(div).parent().appendTo('#right').end().trigger("create"); 
$('div[data-role=collapsible]').collapsible(); 

Это работает, но когда я пытаюсь добавить событие щелчка к литиево с этим кодом ничего не происходит/событие не «огонь».

$("#right").children("div").on("click", "ul li", function() { 
    alert("Right"); 
}); 

Answer 1

Попробуйте

$("#right").on("click", "div ul li", function() { 
    alert("Right"); 
}); 

---

или

$("#right").on("click", "li", function() { 
    alert("Right"); 
}); 

---

я надеюсь, что вы оборачивать вам код в DOM ready

---

Проблемы с кодом вы пытаетесь выбрать ребенок , которого нет в DOM в то время, когда вы хотите его выбрать, поэтому ваш код не работает.

Answer 2

Попробуйте

$("#right").off("click").on("click", "div ul li", function() { 
    alert("Right"); 
}); 

or 

$("#right").off("click").on("click", "li", function() { 
    alert("Right"); 
});