Question

我想将一个带有列表的可折叠div添加到ui-block中，我想要li元素的click事件。我有这样一个ui-grid：

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

这样可行，但是当我尝试使用此代码向li添加点击事件时，没有任何事情发生/事件不会“触发”。

$("#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中

您尝试选择div的{{1}}子代码时出现问题，而您在选择它时不会出现在DOM中，这就是您的代码无效的原因。

Answer 2

尝试

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

or

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

将单击事件添加到动态可折叠div中的动态列表中

2 个答案: