不能阻止列表分隔符被视为列表项

Can't stop list dividers being treated as list items

本文关键字：列表 分隔符 不能      更新时间：2023-09-26
$(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/

修改选择器为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();
   }
});

OR修改选择器为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
});

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

为wrapper元素指定一个id，并相应地修改选择器

在不可点击项上使用标志类&将脚本更改为

这里我使用'stat'类作为标志

$(document).on("click", "li", function() {
    if(!$(this).hasClass('stat')){
        alert("A list item was clicked");
   }
});

因为分隔符是一个'li'元素，编辑"li" -> "a"，看看会发生什么

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

您也可以检查data-role属性，并发现该项目不是list-divider

示例代码将是这样的

 $(document).on("click", "li", function () {
    if ($(this).attr('data-role') !== 'list-divider' && this.id !== "closeButton") {
        alert("A list item was clicked");
    }
});
<<h2> JSFiddle演示/h2>

在jquery中使用:not 

$(document).on("click", "li:not('.ui-li-divider')", function() {
        alert("A list item was clicked");
        //choosePageTypeToBuild();
});

或检查hasClass在jquery

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

相关文章：