我有一个拥有ajax页面加载导航的woocommerce商店。因此，用户点击下一页，并通过ajax加载更多产品。
但是，我有一个javascript文件，用于处理页面加载时每个产品的颜色。但是因为我已经引入了这个ajax页面加载，所以在请求下一页之后不再加载脚本。
我正在使用YITH无限页面滚动。他们有一个触发器yith_infs_added_elem，我可以用它来加载ajax之后做一些代码。
所以我现在有：
jQuery(document).on('yith_infs_added_elem', function() {
});
这是在加载ajax之后我必须用来运行我的脚本的YITH触发器。
但我被困住了。我已经为其他人阅读了许多其他解决方案，但我似乎无法弄清楚如何重新加载我的javascript文件 - /js/javascript/colors/dominant-color-shop.js。
我的javascript文件通常在页面加载时运行：
jQuery( document ).ready( function( $ ) {
var image = new Image;
var colorThief = new ColorThief();
var bg;
var vibrant_color;
var vibrantText;
$('.post-image-hidden-container').each(function() {
bg = $(this).text();
var rgbs_text = [];
image.onload = function() {
$('.shop-page-item-thumb').each(function() {
var thumb = $(this);
var rgbs = [];
thumb.find('img').each(function() {
var vibrant = new Vibrant(this);
var swatches = vibrant.swatches();
var dominantColor = colorThief.getColor(this);
var productColorPalette = colorThief.getPalette(this, 12);
var productLightestColor = productColorPalette.reduce(function(previousValue, currentValue) {
var currLightNess = (0.2126*currentValue[0] + 0.7152*currentValue[1] + 0.0722*currentValue[2]);
var prevLightNess = (0.2126*previousValue[0] + 0.7152*previousValue[1] + 0.0722*previousValue[2]);
return (prevLightNess < currLightNess) ? currentValue : previousValue;
});
/* Create Shades and Tints of Lightest Color */
var lightShadeRGB = productLightestColor.join();
lightShadeRGB = lightShadeRGB.split(',');
var r = lightShadeRGB[0],
g = lightShadeRGB[1],
b = lightShadeRGB[2];
var rpt = lightShadeRGB[0] - 35,
gpt = lightShadeRGB[1] - 35,
bpt = lightShadeRGB[2] - 35;
var tintDk = 'rgb('+rpt+', '+gpt+', '+bpt+')';
for (var swatch in swatches) {
if (swatches.hasOwnProperty(swatch) && swatches[swatch]) {
rgbs.push(swatches[swatch].getHex());
rgbs_text.push(swatches[swatch].getTitleTextColor());
}
}
vibrant_color = rgbs[0];
vibrant_color_2 = rgbs[1];
darkVibrant = rgbs[2];
darkMuted = rgbs[3];
lightVibrant = rgbs[4];
vibrantText = rgbs_text[0];
vibrantText_2 = rgbs_text[1];
darkVibrantText = rgbs_text[2];
darkMutedText = rgbs_text[3];
lightVibrantText = rgbs_text[4];
thumb.parent().find('.product-bottom-info-container').css({
borderTop: '4px solid ' + vibrant_color
});
thumb.parent().find('.hot-badge').css({
backgroundColor: darkMuted,
color: darkMutedText
});
thumb.parent().find('.mp3-badge').css({
backgroundColor: vibrant_color,
color: vibrantText
});
thumb.parent().find('.mp3-badge-link').css({
color: vibrantText
});
thumb.parent().find('.wav-badge').css({
backgroundColor: vibrant_color_2,
color: vibrantText_2
});
thumb.parent().find('.wav-badge-link').css({
color: vibrantText_2
});
thumb.parent().find('.hot-post-bookmark').css({
color: vibrant_color
});
thumb.parent().find('.the-rating-stars-icons').css({
color: vibrant_color
});
thumb.parent().find('.progress-bar').css({
backgroundColor: vibrant_color
});
});
});
}
image.src = bg;
});
$('#player-toggler-id').css({
backgroundColor: '#181f24'
});
});
在我请求下一页之前一切正常。 javscript不再有效。一旦yith ajax加载了这个触发器yith_infs_added_elem，我怎么能再次调用这个脚本呢。
我已经阅读了.on（）。live（）（已弃用）等等。有人可以帮忙吗？
答案 0 :(得分：0)
您的功能仅在页面加载时运行...
要在以后再次触发它，您应该将其设为命名函数。
因此脚本保持完全相同，但包含function arrangeColors(){ （您可以根据需要命名）和}。
然后，在ajax success回调中，再次调用此函数
jQuery( document ).ready( function( $ ) {
function arrangeColors(){ // Make the script a named function
var image = new Image;
var colorThief = new ColorThief();
var bg;
var vibrant_color;
var vibrantText;
$('.post-image-hidden-container').each(function() {
bg = $(this).text();
var rgbs_text = [];
image.onload = function() {
$('.shop-page-item-thumb').each(function() {
var thumb = $(this);
var rgbs = [];
thumb.find('img').each(function() {
var vibrant = new Vibrant(this);
var swatches = vibrant.swatches();
var dominantColor = colorThief.getColor(this);
var productColorPalette = colorThief.getPalette(this, 12);
var productLightestColor = productColorPalette.reduce(function(previousValue, currentValue) {
var currLightNess = (0.2126*currentValue[0] + 0.7152*currentValue[1] + 0.0722*currentValue[2]);
var prevLightNess = (0.2126*previousValue[0] + 0.7152*previousValue[1] + 0.0722*previousValue[2]);
return (prevLightNess < currLightNess) ? currentValue : previousValue;
});
/* Create Shades and Tints of Lightest Color */
var lightShadeRGB = productLightestColor.join();
lightShadeRGB = lightShadeRGB.split(',');
var r = lightShadeRGB[0],
g = lightShadeRGB[1],
b = lightShadeRGB[2];
var rpt = lightShadeRGB[0] - 35,
gpt = lightShadeRGB[1] - 35,
bpt = lightShadeRGB[2] - 35;
var tintDk = 'rgb('+rpt+', '+gpt+', '+bpt+')';
for (var swatch in swatches) {
if (swatches.hasOwnProperty(swatch) && swatches[swatch]) {
rgbs.push(swatches[swatch].getHex());
rgbs_text.push(swatches[swatch].getTitleTextColor());
}
}
vibrant_color = rgbs[0];
vibrant_color_2 = rgbs[1];
darkVibrant = rgbs[2];
darkMuted = rgbs[3];
lightVibrant = rgbs[4];
vibrantText = rgbs_text[0];
vibrantText_2 = rgbs_text[1];
darkVibrantText = rgbs_text[2];
darkMutedText = rgbs_text[3];
lightVibrantText = rgbs_text[4];
thumb.parent().find('.product-bottom-info-container').css({
borderTop: '4px solid ' + vibrant_color
});
thumb.parent().find('.hot-badge').css({
backgroundColor: darkMuted,
color: darkMutedText
});
thumb.parent().find('.mp3-badge').css({
backgroundColor: vibrant_color,
color: vibrantText
});
thumb.parent().find('.mp3-badge-link').css({
color: vibrantText
});
thumb.parent().find('.wav-badge').css({
backgroundColor: vibrant_color_2,
color: vibrantText_2
});
thumb.parent().find('.wav-badge-link').css({
color: vibrantText_2
});
thumb.parent().find('.hot-post-bookmark').css({
color: vibrant_color
});
thumb.parent().find('.the-rating-stars-icons').css({
color: vibrant_color
});
thumb.parent().find('.progress-bar').css({
backgroundColor: vibrant_color
});
});
});
}
image.src = bg;
});
$('#player-toggler-id').css({
backgroundColor: '#181f24'
});
} // Add this closing bracket
// Call the function on load
arrangeColors();
});
答案 1 :(得分：0)
我现在让它像这样工作：
<script type="text/javascript">
jQuery(document).ready(function ($) {
loadAnimation();
jQuery(document).on("yith_infs_added_elem", function () {
loadAnimation();
});
function loadAnimation() {
//here put your code for something to doin my case .add-to-cart trigger
}
//here other functions for example flyToElement
});
</script>