Can't stop list dividers being treated as list items

Question

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

I'm using the above code to perform an action on every list item but list dividers are also proccing this event.

I managed to exclude my close button using

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

however I can't stop it from occurring on list dividers. I've tried to no avail

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

Here's a JSFiddle with the problem: http://jsfiddle.net/2g3w5/

Answer 1

Modify your selector to 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

OR modify your selector to li:not([data-role='list-divider'], #closeButton) and get rid of if condition

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

Demo

Also, make sure you use specific selectors, else the selector you are using will target ALL the li elements in your document.

So assign an id to the wrapper element and modify your selector accordingly.

Answer 2

Use a flag class on items which are not clickable & change you script to this,

Here I am using 'stat' class as flag

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

DEMO

Answer 3

because your divider is a 'li' element, Edit "li" -> "a" and see what happen

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