2012-02-14 13 views
1

iPadプラットフォームでの内部使用のためにクライアント用のHTML5アプリケーションを開発しています。さまざまなタスクのためにあらゆるものがさまざまなJQUERYソリューションを実装していますが、これは意味をなさないものです。JQuery Clickイベントの繰り返し次回のモバイルSafariでのクリック

ページ上にあるアイテムのリストがあり、ユーザーがドラッグアンドドロップして注文をシャッフルできるようにする、順序付けられていないリストに含まれています。削除ボタンをクリックすると、アイテム。

私はそれをちょうど良い仕分けして、最初はうまく削除します。しかし、iPadでテストすると、削除ボタンをクリックした後、確認が実行され、定義した操作が実行されます。しかし、次にこのイベントをトリガーするdivと離れていても、次回クリックしたときにclickイベントをトリガーします。ここで

は、ソートおよび削除

  • タグのいずれかの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> 
    

    答えて

    1

    これは、多くの人々が直面している共通の問題のようです。考えられる理由は、iPad上ではの2つのイベントがタップアンドクリックされているということです。

    ソリューションは

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

    ・ホープ、この作品のような実際のイベントを処理する前に、あなたのイベントをバインド解除することです。

    +0

    ありがとうございました。リンクにも感謝しています。 – unclesol

    +0

    あなたはようこそ... – testndtv