2016-08-05 6 views
0

私のウェブサイトカートに入れる** is ajax。今、私は新しい商品をajax経由でページに挿入するボタンを持っています。私の問題は、新しく追加された製品**がのカートに追加されていて、ajaxで動作しないということです。Ajax読み込みコンテンツのイベントを再接続/再バインドするには?

<ul> 
    <li> 
    <form action="add-to-cart.php?product_id=1">....</form> 
    </li> 
    <li> 
    <form action="add-to-cart.php?product_id=2">....</form> 
    </li> 
<li> 
    <form action="add-to-cart.php?product_id=3">....</form> 
    </li> 
<li> 
    <form action="add-to-cart.php?product_id=4">....</form> 
    </li> 
<li> 
    <form action="add-to-cart.php?product_id=5">....</form> 
    </li> 
</ul> 
<button id="load-more">Load More Products</a> 

私は私がこの

$(document).on("submit", 'form', function(event) { 
    //logic here 
}); 

のようなイベントをバインドすることができます。しかし、私はロジック(私は、ファイルを編集することはできませんと言うことができます)を持っているのjsファイルにアクセスすることはできません知っています。

私の質問は、新しくロードされたajaxコンテンツにイベントを再接続/再バインドすることができます(具体的にはカートのフォームに追加してください)。

はEDIT 既存ADDTOカートのjsファイルのコード

/** 
* Copyright © 2016 Magento. All rights reserved. 
* See COPYING.txt for license details. 
*/ 
define([ 
    'jquery', 
    'mage/translate', 
    'jquery/ui' 
], function($, $t) { 
    "use strict"; 

    $.widget('mage.catalogAddToCart', { 

     options: { 
      processStart: null, 
      processStop: null, 
      bindSubmit: true, 
      minicartSelector: '[data-block="minicart"]', 
      messagesSelector: '[data-placeholder="messages"]', 
      productStatusSelector: '.stock.available', 
      addToCartButtonSelector: '.action.tocart', 
      addToCartButtonDisabledClass: 'disabled', 
      addToCartButtonTextWhileAdding: '', 
      addToCartButtonTextAdded: '', 
      addToCartButtonTextDefault: '' 
     }, 

     _create: function() { 
      if (this.options.bindSubmit) { 
       this._bindSubmit(); 
      } 
     }, 

     _bindSubmit: function() { 
      var self = this; 
      this.element.on('submit', function(e) { 
       e.preventDefault(); 
       self.submitForm($(this)); 
      }); 
     }, 

     isLoaderEnabled: function() { 
      return this.options.processStart && this.options.processStop; 
     }, 

     /** 
     * Handler for the form 'submit' event 
     * 
     * @param {Object} form 
     */ 
     submitForm: function (form) { 
      var addToCartButton, self = this; 

      if (form.has('input[type="file"]').length && form.find('input[type="file"]').val() !== '') { 
       self.element.off('submit'); 
       // disable 'Add to Cart' button 
       addToCartButton = $(form).find(this.options.addToCartButtonSelector); 
       addToCartButton.prop('disabled', true); 
       addToCartButton.addClass(this.options.addToCartButtonDisabledClass); 
       form.submit(); 
      } else { 
       self.ajaxSubmit(form); 
      } 
     }, 

     ajaxSubmit: function(form) { 
      var self = this; 
      $(self.options.minicartSelector).trigger('contentLoading'); 
      self.disableAddToCartButton(form); 

      $.ajax({ 
       url: form.attr('action'), 
       data: form.serialize(), 
       type: 'post', 
       dataType: 'json', 
       beforeSend: function() { 
        if (self.isLoaderEnabled()) { 
         $('body').trigger(self.options.processStart); 
        } 
       }, 
       success: function(res) { 
        if (self.isLoaderEnabled()) { 
         $('body').trigger(self.options.processStop); 
        } 

        if (res.backUrl) { 
         window.location = res.backUrl; 
         return; 
        } 
        if (res.messages) { 
         $(self.options.messagesSelector).html(res.messages); 
        } 
        if (res.minicart) { 
         $(self.options.minicartSelector).replaceWith(res.minicart); 
         $(self.options.minicartSelector).trigger('contentUpdated'); 
        } 
        if (res.product && res.product.statusText) { 
         $(self.options.productStatusSelector) 
          .removeClass('available') 
          .addClass('unavailable') 
          .find('span') 
          .html(res.product.statusText); 
        } 
        self.enableAddToCartButton(form); 
       } 
      }); 
     }, 

     disableAddToCartButton: function(form) { 
      var addToCartButtonTextWhileAdding = this.options.addToCartButtonTextWhileAdding || $t('Adding...'); 
      var addToCartButton = $(form).find(this.options.addToCartButtonSelector); 
      addToCartButton.addClass(this.options.addToCartButtonDisabledClass); 
      addToCartButton.find('span').text(addToCartButtonTextWhileAdding); 
      addToCartButton.attr('title', addToCartButtonTextWhileAdding); 
     }, 

     enableAddToCartButton: function(form) { 
      var addToCartButtonTextAdded = this.options.addToCartButtonTextAdded || $t('Added'); 
      var self = this, 
       addToCartButton = $(form).find(this.options.addToCartButtonSelector); 

      addToCartButton.find('span').text(addToCartButtonTextAdded); 
      addToCartButton.attr('title', addToCartButtonTextAdded); 

      setTimeout(function() { 
       var addToCartButtonTextDefault = self.options.addToCartButtonTextDefault || $t('Add to Cart'); 
       addToCartButton.removeClass(self.options.addToCartButtonDisabledClass); 
       addToCartButton.find('span').text(addToCartButtonTextDefault); 
       addToCartButton.attr('title', addToCartButtonTextDefault); 
      }, 1000); 
     } 
    }); 

    return $.mage.catalogAddToCart; 
}); 
+0

私はあなた自身に答えていると思いました。 $(document).on( "submit"、 "form"、function(event){ //ここをクリック });動的に作成されたイベントを再バインドする方法です。 –

答えて

2

てみロードAJAX呼び出し後のJavaScriptファイルこと -

$.getScript(src); 
+0

ファイルはrequire.jsによって読み込まれますので、ファイルを再読み込み中にエラーが発生します –

+0

これが動作するかどうかわかりませんが、require.jsをもう一度ロードしてみてください。 –

+0

それは良い考えではないと思います。 addtocart jsファイルを含める質問を編集しました。それが助けになるなら –

2

はあなたのすべてをありがとう、私は解決策を見出しました。私はajax呼び出しの後にカートメソッドに再度追加して呼び出しました。

$.ajax({ 
    dataType: 'html', 
    type: 'GET', 
    url:url, 
    success: function(data){ 
     var data = $($.parseHTML(data)); 
     var productList = data.find('.products.list').html(); 
     productWrapper.append(productList); 
     $("form").catalogAddToCart(); // this solved the problem 
    }, 
}); 
関連する問題