jQuery Forum

Can I ask why you want to bind the click to the icon? Why not use a split list item instead? The icon is just part of the styling of the list item, it's not really meant to be a separate button unless you use the split list.

I think he doesn't like the placement of the icon on the split list.

I would recommend not using a listview at all in this case. You are just going to have to fight with the JQM CSS and suffer the slow construction time, and to what useful end? Just create your own list items out of plain old HTML and CSS.

In any case, I think the icon itself is going to be too small a target. That is why the split list has that large square box to the right - that's the target. So, you should create a target that is large enough to easily touch. The target doesn't need to be visible. Just an element that covers the area that you want to be tappable.

You might need to use z-index to make sure that your icon (or other target) gets the event instead of the list item.

haga0054,watusiware
thanks for ur replies...

my intention was to give a delete (x) icon to delete item from list.

Lots of us don't think split lists will suffice for our applications.

This is one way of doing things. But most of us don't want design dictated to us. There really isn't much flexibility in the split lists, or in listviews in general. Somebody has decided what they think looks nice, but that doesn't mean we have to agree.

It's really not hard to create a list in HTML and make it look nice. Web designers have been doing it now for quite a few years. What do you think anyone did before JQM?

So, now I think the listview is nice for prototyping - and that's all.

@poonkave - @haga0054 and @watusiware both have good points.  Just a general answer here...but, I think you would need to have an id set for each icon element in your listview.  Otherwise, how does the browser know which item the event listener is bound to?  Will it bind to all of the ui-icon elements it finds under the UL or will it bind to each one and then only be bound to the last one that gets bound to when it's all finished binding.  I dunno.  Quick test would be to click on item 3 in your example.  

@poonkave

Alternatively to an id or class, you could try using a data-xyz attribute, which would allow you to bind:

      $(document).on('click', 'ul li', function(){
           var target = $(this).jqmData("xyz");
           // do something
      });

Regarding split lists:
The default JQM ui-icon will be 18x18px, so as @watusi says, this is pretty hard to hit... :-) I'd also go with the split button, which I think works just fine for that.

I'm doing deletes/submits out of a listview like this:

      // listview
      <ul data-role="listview" data-inset="true" data-divider-theme="a" class="nMT">
           <li data-role="list-divider"><span class="ui-divider-text">some text</span></li>
           <li data-icon="setup"><a href="##" class="loadDelAdress" data-show="_my_id_">_text_</a></li>
      </ul>   

I'm loading this list in via Ajax. Once the list has loaded and enhanced, I'm running a function setting up element bindings like so:

       var bindRegister = function() {
           ...
           // load form EDIT
           $('.loadDelAdress').on('click', function(){                   
                var in_param = "edit_delivery",
                     in_acc = $(this).jqmData('show');
                     // whatever you want to do
                spin( "show" );
                ajaxUpdate( "tmp_delivery.cfm", $('.deliveryWrapper'), in_param, in_acc  );
                });
            }

Your problem might be that when your bindings are set, JQM has not finished enhancing the page/all elements, so the class you are trying to bind to or the element itself may not have been added by JQM (console .ui-icon.length to see). That's why I'm binding to LI and set a data-show attribute in the unenhanced markup.

Also, if you are binding to the icon, what are you trying to preventDefault? The icon itself will not have anything worth preventing.

I've been using data- attributes for bindings as well. I do this to avoid any possibility of either JQM or the browser from trying to "enhance" my links.

So, I add a data-href attribute to any element, and some class that allows me to target it for delegation.

No, you don't have to bind to every element. Just use a delegation. I'm delegating to the document, but it would be better delegate to the root of the list (e.g. <li> element for a listview) and install that delegation at pageinit.