Question

我正在为客户开发HTML5应用程序，以便在iPad平台上进行内部使用。一切都在为各种任务实施各种JQUERY解决方案，但这个似乎没有意义。

他们有一个页面上的项目列表，包含在一个无序列表中，他们希望他们的用户可以拖放以随机播放订单，或者单击删除按钮删除其中一个项目

我把它排序得很好，一开始它删除得很好。但是，当我在iPad上进行测试时，在点击删除按钮后，它会通过确认并执行我定义的操作。但是，下次我点击屏幕再次触发点击事件，即使我远离定义为触发此事件的div。

以下是其中一个

标记的HTML片段，用于排序和删除：

<li id="12345">
<div class="clearfix">
    <div class="product-image">
        <img src="../../img/presentation.png" width="200" height="140" />
    </div>
    <div class="product-info">
        <div class="details">
            <h3><a class="name" href="#">Comparison</a></h3>
            <ul>
                <li><strong>Competitor: </strong>[Brand]</li>
                <li><strong>Us: </strong>[Brand]</li>
            </ul>                                       
        </div>
        <div class="brand">
            <div class="remove" style="width: 30px; height: 30px;">(&times;)</div>
            <div class="edit-bar"><img src="../../img/presentations-edit-bars.png" /></div>
            <p class="logo">[Distributor]</p>
        </div>
    </div>          
</div>

以下是各种jquery包含和完成这些任务的内部javascript：

<script src="../../js/libs/jquery.min.js" type="text/javascript"></script>
<script src="../../js/libs/jquery-ui.min.js" type="text/javascript"></script>
<script src="../../js/libs/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    $(function () {
        $(".remove").click(function () {
            var e = $(this);

            this.style.backgroundColor = "#FFAAAA";

            var p = this.parentNode;
            var count = 1;
            while (p.tagName != 'LI') {
                p = p.parentNode;
                count++;
            }

            var cont = confirm("Are you sure you would like to delete this item?");

            if (cont) {
                var deletedItems = document.getElementById('deletedItems');
                if (deletedItems.value != "") {
                    deletedItems.value += ",";
                }
                deletedItems.value += p.id;
                p.style.display = 'none';
            }

            this.style.backgroundColor = "transparent";
        });
        $("#sortable").sortable({
            stop: function (event, ui) {
                var newOrder = "";
                for (i = 0; i < $("#sortable li").size(); i++) {
                    newOrder += $("#sortable li").get(i).id;
                    if (i < $("#sortable li").size() - 1) {
                        newOrder += ",";
                    }
                }
                document.getElementById('currentOrder').value = newOrder;
            }
        });
        $("#sortable").disableSelection();
    });
</script>

Answer 1

这似乎是许多人面临的一个共同问题。可能的原因是，在iPad上，您有两个事件被称为点按并点击。

解决方案是在处理实际事件之前取消绑定您的事件，例如

$('.remove').unbind('click touchstart').click(function() { ... }

希望这有效。

JQuery单击事件重复下一步在Mobile Safari中单击

1 个答案: