Estoy escribiendo una función jquery para filtrar productos por tipo. Funciona perfectamente bien pero cuando filtro por tipo más de una vez. El elemento Html de la caja del producto llamado addToWishlist deja de funcionar. de lo contrario, todos los productos se muestran perfectamente bien. No puedo averiguar dónde está el problema. Aquí está el código
//load products data in array var productArray = []; $("#product-items .col-4").each (function (){ productArray.push($(this)) }) $(".filter-btn").click(function(e) { var btnId = e.target.id; var tempArray = []; for(var i = 0;i < productArray.length; i++){ var type = $(productArray[i]).find('.addToWishlist').data("type"); if(btnId == "fairness-soaps" && type == "Fairness") tempArray.push(productArray[i]) if(btnId == "deep-clean-soaps" && type == "Deep-Clean") tempArray.push(productArray[i]) if(btnId == "skin-whitening-soaps" && type == "Skin-Whitening") tempArray.push(productArray[i]) } $("#product-items").html(tempArray); }); <div class="row" id="product-items"> <div class="col-4"> <a href="#"> <div class="product-box"> <div class="product-img"> <img src="images/product-img13.png" alt=""> <a type="button" class="addToWishlist" data-id="13" data-image="images/product-img13.png" data-price="$30" data-name="Aloe Vera Soap" data-quantity="1" data-weight="50g" data-availability="In Stock" data-type="Fairness"> <i class="wishlist-icon fa fa-heart-o"></i></a> </div> <p class="product-name">Aloe Vera Soap</p> <p class="product-price">$30</p> </div> </a> </div> and so on....No estás reordenando los Elementos del producto, los estás reescribiendo. Aunque el HTML de los productos es el mismo, los eventos que les adjuntas se pierden cuando llamas a $("#product-items").html(tempArray); . Debe volver a aplicar los eventos a los botones "addToWishList" o reordenar los elementos en lugar de escribir directamente en el html.
Aquí hay un ejemplo artificial que muestra cómo el hecho de que el HTML sea el mismo no significa que el evento se mantenga:
<div id="container"> <button id="special-button">Click me</button> </div> <script> $("#special-button").on("click", function(){ alert("I've Been clicked!"); }); $("#container").html(`<button id="special-button">Click me</button>`); </script>