Question

Prestashop v1.6 default-bootstrap主题，product-list.tpl文件。

我有一个按钮添加到购物车和div与一些聪明的代码：

<a class="ajax_add_to_cart_button" href="....">

<div id="div1">{if $added}Added{else}not added{/if}</div>

现在，当我点击链接时，我只想刷新div内容。

我已经在堆栈中尝试了一些代码查找，但我的知识仍未实现。

我尝试了什么并且它不起作用：

$(document).on('click', '.ajax_add_to_cart_button', function() {
    $("#div1").load()       /*also $("#div1").load("#div1")*/
});

和

$("#div1").load(location.href + " #div1");

还有更多。

编辑，这对我来说也不起作用：

$(function(){
$(document).on('click', '.ajax_add_to_cart_button', function(e) {
e.preventDefault();
$("#div1").load($(this).attr("href")); /*and this:  $("#div1").load($(this).attr("href #div1"));*/
return false
});
});

EDIT2：当我尝试此代码时，只有一半工作

$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function(){
$("#div1").html("result reloaded successfully");
});
});

为什么有一半？因为文本只显示在第一个产品中，所以无论我点击哪一个产品，我都会尝试将html()切换为load()或refresh()，但之后无效。< / p>

EDIT3

$(document).ready(function(){
var productid = "{product.id_product}"
$(".ajax_add_to_cart_button").click(function(){
$("#div1" + productid).html("result reloaded successfully");
});
});


<div id="div1{product.id_product}">{if $added}Added{else}not added{/if}</div>

它是所有产品中的显示信息，产品中的所有容器现在都有不同的ID。

Answer 1

尝试关注并检查它是否有效..

$(function(){
 $(document).on('click', '.ajax_add_to_cart_button', function(e) {
    e.preventDefault();
    $("#one").load($(this).attr("href"));
    return false.
});

});

我注意到你的选择器中有错误的类。请检查一下。

Answer 2

嗯......我明白了...我猜你的问题是你对所有产品使用相同的ID。 DOM'应该'拥有一个元素的唯一ID，尝试另一种方式，也许是一个简单的类作为选择器，你不能对所有元素使用相同的id :)

例如（我假设你的div有mybeautifuldiv类）：

$(document).ready(function(){
    $(".ajax_add_to_cart_button").click(function(){
        $(".mybeautifuldiv").html("result reloaded successfully");
    });
});

Answer 3

如果您在有产品列表（类别页面等）时尝试执行此操作，则需要定位适当的div。而你可能不想在你的div中使用id但是类。

<div class="my-custom-div">{if $added}Added{else}not added{/if}</div>

这个div是否在'添加到购物车'锚点？如果是，那么你需要定位它：

$(document).ready(function(){
    $(".ajax_add_to_cart_button").click(function() {
        $(this).find('.my-custom-div').html('Content updated!');
    });
});

如果不是那么你可以遍历产品的父div并在其中找到你的自定义div。例如，在默认prestashop主题的类别页面中：

$(document).ready(function(){
    $(".ajax_add_to_cart_button").click(function() {           
        $(this).closest('.product-container').find('.my-custom-div').html('Content updated!');
    });
});

点击链接

3 个答案: