JavaScript onclickイベントがモバイルデバイスで動作していません

Question

次のコードを使用してカートにアイテムを追加するOpencart 1.5.6.4が実行されています。

<input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /> 

モバイルデバイスでは、Javascriptのonclickイベントが機能していないことがわかりました。

function addToCart(product_id, quantity) { 
    quantity = typeof(quantity) != 'undefined' ? quantity : 1; 

     $.ajax({ 
      url: 'index.php?route=checkout/cart/add', 
      type: 'post', 
      data: 'product_id=' + product_id + '&quantity=' + quantity, 
      dataType: 'json', 
      success: function(json) { 
       $('.success, .warning, .attention, .information, .error').remove(); 

       if (json['redirect']) { 
        location = json['redirect']; 
       } 

       if (json['success']) { 
        $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>'); 

        $('.success').fadeIn('slow'); 

        $('#cart-total').html(json['total']); 

        $('html, body').animate({ scrollTop: 0 }, 'slow'); 
       } 
      } 
     }); 
    } 

Answer 1

持っているあなたは、あなたの方法ではなく、あなたのイベントの2つの引数を必要と見ますwwwに。ウェブサイトのURLから欠落しています。

Answer 2

てみ使用がバブリングを停止するAJAX後に偽を返す次のように

javascript関数です。

Answer 3

この機能が実行されているかどうかを確認します。おそらく、いくつかのconsole.logを配置します。

について@volodymyr-duday anwserについて：falseを返す代わりに、イベントオブジェクトstopPropagation()にメソッドがあります。

機能が動作しない場合は、touchendのようなタッチイベントに接続してみてください。

Answer 4

コードにタッチイベントを追加してみてください。

$("input.button").on("click touchend", function() { 
    addToCart($(this).attr("data-product-id")); 
}); 

function addToCart(product_id, quantity) { 
    quantity = typeof(quantity) != 'undefined' ? quantity : 1; 

    $.ajax({ 
     url: 'index.php?route=checkout/cart/add', 
     type: 'post', 
     data: 'product_id=' + product_id + '&quantity=' + quantity, 
     dataType: 'json', 
     success: function(json) { 
      $('.success, .warning, .attention, .information, .error').remove(); 

      if (json['redirect']) { 
       location = json['redirect']; 
      } 

      if (json['success']) { 
       $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>'); 

       $('.success').fadeIn('slow'); 

       $('#cart-total').html(json['total']); 

       $('html, body').animate({ 
        scrollTop: 0 
       }, 'slow'); 
      } 
     } 
    }); 
} 

HTML：

<input type="button" value="<?php echo $button_cart; ?>" data-product-id="<?php echo $product['product_id']; ?>" class="button" /> 

あなたはタッチイベントhere上の複数の基準を見つけることができます。

Answer 5

jQueryを使用していることがわかります。あなたのクリックイベントが発生しません場合は 、あなたがそうでなければ

$(document).ready(function(){ 
    $("[your-selector-here]").on("click touchstart", function(){ 
     //do stuff 
    }); 
}); 

を試すことができ、私はあなたが唯一のAjaxが原因失敗していた1

function addToCart(product_id, quantity){} 

onclick="addToCart('<?php echo $product['product_id']; ?>');"