在移动Safari中未触发的li元素中的div的Jquery单击事件

Question

修正：最后我直接生成元素而不是由jQuery渲染。

更新2：关于真正的问题似乎很清楚。我做了几个测试，只有一个测试我在其中插入一个链接。但是我不想绑定整个li元素，而是绑定li中的div元素。

更新：我对div的位置进行了一些修改，它现在可以在android中运行，但移动Safari甚至可以在ul列表中找到任何元素。

以下适用于桌面版Safari和Chrome，但不支持其移动版本。有任何想法吗？

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

向元素添加空的onclick属性：

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

Link to jQuery issue that describes the problem

Answer 2

我认为这与您绑定点击事件的方式有关，因为它在桌面浏览器中有效，但在移动浏览器中却没有。

你应该在pageinit事件中包装你的代码吗？
jQuery Mobile Events

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

Answer 3

对于iOS，只需添加

    *.classidentifier*{
      cursor:pointer;
    }

在该类或ID的CSS中。这解决了这个问题。