JQuery Click 事件在 Mobile Safari 中的下一次单击时重复

Question

我正在为客户开发一个 HTML5 应用程序，供他们在 iPad 平台上内部使用。为各种任务实现各种 JQUERY 解决方案的一切都进展顺利，但这个解决方案似乎没有意义。

他们在页面上有一个项目列表，包含在一个无序列表中，他们希望用户能够拖放该列表来重新排列顺序，或者单击删除按钮来删除其中一个项目。

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

之一的 HTML 片段

以下是用于排序和删除的标签 ：

    

        
    
    

        

            
比较
            

                
竞争对手：[品牌]
                
我们：[品牌]
            
                                       
        
        

            
(×)
;
            

            
[经销商]
        
    
          

以下是完成这些任务的各种 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() { ... }

希望这有效。