android - Jquery click event of a div in li element not fired in mobile Safari

Question

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;
}

Answer 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