tap/click event firing multiple times for elements of listview

tap/click event firing multiple times for elements of listview

I currently have a simple, 2-page application. The first page is a splash page of sort with a single button that leads to a list view. When the application first loads, the listview is dynamically filled with content. A binding is then created on the "li" elements to capture any clicks/taps. 

This handler will ultimately be responsible for loading the next page, however, I'm having problems right now. Pretty sporadically, when list elements are clicked, the event will fire twice. Sometimes just once, but mostly twice. It doesn't seem to have anything to do with the duration of my click or otherwise. For reference, I'm using the iPhone simulator.

I've tried messing with .live() and .delegate(), as well as switching to the "click" event. None of these seem to make much of a difference.

What am I missing here?


JavaScript:

  1. function onDeviceReady() {

      var resorts_html = '';

      $.getJSON(

          SA.base_url + '/resorts', 

          function (data) {

            $.each(data.resorts, function(key, val) {

              resorts_html += '<li resort_id="' + val.id + '"><a href="#">' + val.name + '</a></li>';

            });

            $('#resorts[data-role=page] #resort_list[data-role=listview]').html(resorts_html);

            $('li').bind('tap', function() { // this is a mess. 'tap' fires off multiple times each click. 

              var resort_id = $(this).attr('resort_id');

             debug.log('Tapped: ' + resort_id);

            });

          }

        )

    }

HTML:


  1. <!-- Index Page -->

    <div id="main" data-role="page">

    <div data-role="header">

    <h1>Title</h1>

    </div> 

    <div data-role="content">

    <h3>Welcome</h3>

    <a href="#resorts" data-role="button">View Resorts</a>

    </div> 

    </div>

    <!-- Resorts Page -->

    <div id="resorts" data-role="page">

    <div data-role="header">

    <h1>Resorts</h1>

    </div> 

    <div data-role="content">

    <ul id="resort_list" data-role="listview">

    </ul>

    </div> 

    </div>