Click event is not working

[blackroostercouk]

Click event is not working after dom bind, this is big issue for predictive search or ajax pagination scripts. I've wrote my own click and foreach event problem solved. Over all really usefull, thank you!

[mayur2010]

@blackroostercouk Can you share those with us? if possible. We're also having the same issues.

[blackroostercouk]

@blackroostercouk Can you share those with us? if possible. We're also having the same issues.

sure, you can find Wishlist.js below.

const LOCAL_STORAGE_WISHLIST_KEY = 'shopify-wishlist';
const LOCAL_STORAGE_DELIMITER = ',';
const BUTTON_ACTIVE_CLASS = 'active';
const GRID_LOADED_CLASS = 'loaded';

const selectors = {
button: '[button-wishlist]',
grid: '[grid-wishlist]',
productCard: '.product-card',
};

document.addEventListener('DOMContentLoaded', () => {

initGrid();
});

document.addEventListener('shopify-wishlist:updated', (event) => {
console.log('[Shopify Wishlist] Wishlist Updated ✅', event.detail.wishlist);
initGrid();
});

document.addEventListener('shopify-wishlist:init-product-grid', (event) => {
console.log('[Shopify Wishlist] Wishlist Product List Loaded ✅', event.detail.wishlist);
});

document.addEventListener('shopify-wishlist:init-buttons', (event) => {
console.log('[Shopify Wishlist] Wishlist Buttons Loaded ✅', event.detail.wishlist);
});

const fetchProductCardHTML = (handle) => {
const productTileTemplateUrl = /products/${handle}?view=card;
return fetch(productTileTemplateUrl)
.then((res) => res.text())
.then((res) => {
const text = res;
const parser = new DOMParser();
const htmlDocument = parser.parseFromString(text, 'text/html');
const productCard = htmlDocument.documentElement.querySelector(selectors.productCard);
return productCard.outerHTML;
})
.catch((err) => console.error([Shopify Wishlist] Failed to load content for handle: ${handle}, err));
};

const setupGrid = async (grid) => {
const wishlist = getWishlist();
const requests = wishlist.map(fetchProductCardHTML);
const responses = await Promise.all(requests);
const wishlistProductCards = responses.join('');
grid.innerHTML = wishlistProductCards;
grid.classList.add(GRID_LOADED_CLASS);

const event = new CustomEvent('shopify-wishlist:init-product-grid', {
detail: { wishlist: wishlist }
});
document.dispatchEvent(event);
};

$(document).on('click','.whishlist-btn', function (event){
console.log('click');
var datahandle = $(this).attr('data-product-handle');
updateWishlist(datahandle);
if($(this).hasClass('active'))
{
$(this).removeClass('active')
}
else{
$(this).addClass('active');
}
});

const initGrid = () => {
const grid = document.querySelector(selectors.grid) || false;
if (grid) setupGrid(grid);
};

const getWishlist = () => {
const wishlist = localStorage.getItem(LOCAL_STORAGE_WISHLIST_KEY) || false;
if (wishlist) return wishlist.split(LOCAL_STORAGE_DELIMITER);
return [];
};

const setWishlist = (array) => {
const wishlist = array.join(LOCAL_STORAGE_DELIMITER);
if (array.length) localStorage.setItem(LOCAL_STORAGE_WISHLIST_KEY, wishlist);
else localStorage.removeItem(LOCAL_STORAGE_WISHLIST_KEY);

const event = new CustomEvent('shopify-wishlist:updated', {
detail: { wishlist: array }
});
document.dispatchEvent(event);

return wishlist;
};

const updateWishlist = (handle) => {
const wishlist = getWishlist();
const indexInWishlist = wishlist.indexOf(handle);
if (indexInWishlist === -1) wishlist.push(handle);
else wishlist.splice(indexInWishlist, 1);
return setWishlist(wishlist);
};

const wishlistContains = (handle) => {
const wishlist = getWishlist();
return wishlist.includes(handle);
};

const resetWishlist = () => {
return setWishlist([]);
};

$( ".whishlist-btn" ).each(function() {
var datahandle = $(this).attr('data-product-handle');
if (wishlistContains(datahandle)){
$(this).addClass('active');
}
});

function reloadHearth(){
$( ".whishlist-btn" ).each(function() {
var datahandle = $(this).attr('data-product-handle');
if (wishlistContains(datahandle)){
$(this).addClass('active');
}
});
console.log('heartreload');
}

[prinka-goyal]

[Shopify Wishlist] Failed to load content for handle

[dlerm]

I think the proper way to handle injected DOM elements would be to use delegated event listeners connected to the document. I'll add an example soon