Jquery click event of a div in li element not fire

问题:

Fixed: Finally I generate elements directly instead of being rendered by jQuery.

Updated2: It seems clear about the real issue. I did a couple of tests, only one fired that I insert a link in it. but I don't want to bind the whole li element but a div element in a li.

Updated: I did some modifications about positions of divs, it works in android now but mobile Safari even any elements in ul list.

The following works in desktop Safari and Chrome but not their mobile versions. Any ideas?

js:

$('#SubCategories > li .likeRibbon').live('click', function () {
   ......
});

html:

<ul id="SubCategories">
      <li id="st2" >          
       <div class="likeRibbon">Like?</div>
      </li>
</ul>

css:

#SubCategories .likeRibbon
{
    border-style: solid none solid none;
    border-width: 1px 0px 1px 0px;
    border-color: #565656;
    background-color: #565656;
    color: #333;
    text-shadow: 0 1px 0 #777, 0 -1px 0 black;
    line-height: 1;
    padding: 2px 0 5px 0;
    -moz-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    -o-transform: rotate(-40deg);
    -webkit-transform: rotate(-40deg);
    text-align: center;
    vertical-align: baseline;
    position: absolute;
    width: 100px;
    right: -35px;
    bottom: 5px;
}

回答1:

Add an empty onclick attribute to the element:

<ul id="SubCategories">
      <li id="st2" >          
       <div onclick="" class="likeRibbon">Like?</div>
      </li>
</ul>

Link to jQuery issue that describes the problem

回答2:

I think it's related to the way you are binding the click event as it works in desktop browser but it doesn't in mobile browsers.

Shall you wrap your code within the pageinit event?
jQuery Mobile Events

<script type="text/javascript">
 $("#pageID").live('pageinit', function() {
   // do something here...
 });
</script>

回答3:

For iOS, just add

    *.classidentifier*{
      cursor:pointer;
    }

in the CSS for that class or id. This fixes the issue.