私のウェブサイトカートに入れる** 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;
});
私はあなた自身に答えていると思いました。 $(document).on( "submit"、 "form"、function(event){ //ここをクリック });動的に作成されたイベントを再バインドする方法です。 –