javascript - 无法阻止列表分隔符被视为列表项

Question

$(document).on("click", "li", function() {alert("A list item was clicked");} 

我正在使用上面的代码对每个列表项执行操作，但列表分隔符也在处理此事件。

我设法使用

排除了我的关闭按钮

$(document).on("click", "li", function() {
    if (this.id !== "closeButton") {
        alert("A list item was clicked");
    }
});

但是我无法阻止它出现在列表分隔符上。我试过了没有用

$(document).on("click", "li", function() {
    if (this.class !== "ui-li-divider") {
        alert("A list item was clicked");
    }
});

这是一个有问题的 JSFiddle:http://jsfiddle.net/2g3w5/

Answer 1

将选择器修改为 li:not([data-role='list-divider'])

$(document).on("click", "li:not([data-role='list-divider'])", function() {
    if (this.id !== "closeButton") {
        alert("A list item was clicked");
        //choosePageTypeToBuild();
   }
});

Demo

或将您的选择器修改为 li:not([data-role='list-divider'], #closeButton) 并删除 if条件

$(document).on("click", "li:not([data-role='list-divider'], #closeButton)", function() {
    alert("A list item was clicked"); //Get rid of if condition
});

Demo

此外，请确保您使用特定的选择器，否则您使用的选择器将定位文档中的所有 li 元素。

因此，为包装器元素分配一个 id 并相应地修改您的选择器。