Added listview doesn't respond to click

Question

I have a listview which I created with JavaScript/jQuery. When I click on a listitem I have to execute code.

Scenario 1: I use this code:

$("div#home ul#one li").live('click', function() { console.log('click') });

this code picks up the click, but it picks it up twice. So when I click on a listitem it outputs two console.logs

Scenario 2: I have this code for another list which was created in the normal index.html file.

$("div#home ul#two li").off('click').on('click', function() { console.log('click') });

This code doesn't execute the code twice.

Is there anyway I could get Scenario 2 working on the JavaScript created listview? (Any other suggestions are welcome too)

Answer 1

If you are dynamically creating elements.. You need to use the delegated form

$("div#home").on('click','li', function() { console.log('click') });

Binding the event handler to the closest static parent that exists at the time of binding

If your ul 's aren't dynamic - you can bind it to the ul

$("div#home ul").on('click','li', function() { console.log('click') });

Answer 2

To get scenario 2 working for dynamically appended element, use on with a delegate, like this:

$("#two").on('click', 'li', function() { console.log('click') });

I've shortened the first selector because if you're selecting by id , then it should be unique.

Also, I would assume the first scenario logs to the console twice because you have nested li elements?

Answer 3

The problem is that you're not binding your on listener in the right place, you are declaring in a pageinit handler for ANY page to add your on listener to the li: $("div#home").on('click','li', function() { console.log('click') });

Thus you are attaching one listener on the div#login page and attaching a redundant 2nd listener on the second div#home page. When you click the li one event is fired to two listeners and you get the two clicks.

What you should be doing is in your $(document).on('pageinit', function() wrap your on listener declaration in a conditional that checks which page you're on:

if ($(this).attr(id') === 'home'){
     $("div#home").on('click','li', function() { console.log('click') });
}

That's the simple solution, what you really should be doing is branching your code based on which page fired the pageinit event and calling the correct code based on it. See: my guide on structuring jQM Apps .

The gist of it is attach a data attr to your div[data-role=page] etc that describes your page then call separate code for each page. (instead of using the ID like in this example, because you can easily have more than one instance of a page in multi-page jQM apps)

Answer 4

I can't create a jsFiddle because this seems to can't load my function for a reason. I've put the script online on my own website.

http://anjirorijo.com/webapp/

The login settings are working. Just click login and there is the screen (home). If you click on one of the LI tags and open your console logs, you'll see 2 clicks instead of 1.

If there's any code you need, please comment below.

---

The current code which I use:

$("div#home").on('click','li', function() { console.log('click') });

can be found in the custom.js file

• sidenote: don't refresh the page when you're on the #home page. This will cause jQuery to not load the function which dynamically creates the list. Use logout and login again.