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

【问题标题】：Jquery click event of a div in li element not fired in mobile Safari移动Safari中未触发li元素中div的Jquery单击事件
【发布时间】：2012-01-31 07:12:55
【问题描述】：

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

Updated2：真正的问题似乎很清楚。我做了几个测试，只有一个触发了我在其中插入链接。但我不想绑定整个 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;
}

【问题讨论】：

页面在移动浏览器中加载时是否会旋转 div？我的意思是在任何点击之前。
对不起伙计，我做了一些更改后认为这与轮换无关，请参阅上面的更新信息，谢谢。
@William，在哪种情况下将点击事件绑定到 div？
我将它绑定在“$('#menulist').live('pageinit', function (event)”中。
@William，请选择正确的答案。我很困惑，对于所有答案，您都被评论为好！或者，如果您有另一个答案，请发布。 - 谢谢。

标签： jquery android css jquery-mobile mobile-safari

【解决方案1】：

对于 iOS，只需添加

*.classidentifier*{ 光标：指针； }

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

【讨论】：

【解决方案2】：

给元素添加一个空的onclick属性：

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

Link to jQuery issue that describes the problem

【讨论】：

从该票中添加cursor: pointer 的建议很有趣。
ios safari 需要 onclick="" 属性似乎很奇怪。光标：指针建议有效吗？它对我有用：/
@Adgezaza 我没有进行广泛的测试，但我已经成功地使用了光标解决方法。
我看了票。我怀疑我们需要在哪里添加 cursor:pointer ？是在 :hover 类还是普通类？
我在 Android 浏览器中遇到了这个问题，这个解决方案对我有用。谢谢

【解决方案3】：

我认为这与您绑定点击事件的方式有关，因为它适用于桌面浏览器，但不适用于移动浏览器。

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

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

【讨论】：

@William，请选择正确的答案。我很困惑，对于所有答案，您都被评论为好！
对不起@smilyface，这个问题太老了，我不记得了，如果你创建一个新票，我会看看。