Question

maybe this is a too basic question but what is the difference between the .on() event binding in jQuery 1.7+ and 1.8+? My problem is the following:

I am dynamically creating a list with ASP MVC 3 and jQuery Mobile 1.2 RC1 and I bind a click event to the li-elements. If I use jQuery 1.7+ all works fine but when I use 1.8+ the click event is only fired on the first li-element. I have checked the docs of jQuery but actually there should be no difference or?

<ul data-role="listview" id="immo_list" data-inset="true" 
data-theme="c" data-dividertheme="b" data-filter="true">
  <%
      foreach (var immobilie in Model.immoObjekte)
                        {
  %>
      <li id="immos" val="<%: immobilie.id %>"> <a href="">
          <%: immobilie.strasse %> <%:immobilie.hausnummer%></a>
          <span class="ui-li-count"><%:immobilie.id%></span>
      </li> 
  <%
      }
  %>
  </ul>


$('#immo_list').on('click', '#immos', function () {
    $.mobile.loading('show');

    var immoid = $(this).attr('val');
    var days = $("#interval").val();

    sessionStorage.setItem("clicked", "false");
    sessionStorage.setItem("mode", "");

    sessionStorage.setItem("days", days);
    sessionStorage.setItem("immoid", immoid);

    getAndShowPflichten(immoid, days);

});

Thanks for your help!

Answer 1

You cannot have more than one element with the same ID, it has to be unique. Make #immos a class instead.

jquery 1.8 includes a new version of Sizzle, their selector engine. As you say it works in 1.7, I guess the new version is stricter in that sense. For performance reasons, Sizzle will stop trawling the document for the element as soon as it finds #immos, as it expects it to be unique.