Question

为什么点击功能不执行？

我在加载json之后放了点击功能，我尝试了很多次，但我不知道为什么不工作（第一次问）

var contentJson = function () {
        $.getJSON("debacco.json", function (json) {
            $.each(json.ambientes.espressione.produtos, function (e, f, y, c) {
                $('.list-cubas-espressione').append('<li class="cuba-img" data-cuba="' + f.img + '"><img src="/images/espressione/produtos/' + f.img + '/' + f.img + '.jpg" /></li>');
            });
            $.each(json.ambientes.funzionale.produtos, function (e, f) {
                $('.list-cubas-funzionale').append('<li class="cuba-img" data-cuba="' + f.img + '"><img src="/images/funzionale/produtos/' + f.img + '/' + f.img + '.jpg" /></li>');
            });
            $.each(json.ambientes.gourmet.produtos, function (e, f) {
                $('.list-cubas-gourmet').append('<li class="cuba-img" data-cuba="' + f.img + '"><img src="/images/gourmet/produtos/' + f.img + '/' + f.img + '.jpg" /></li>');

            });
        });
}

contentJson();

$('.cuba-img').on('click', function () {
       alert('teste');
       imgCuba = $(this).attr('data-cuba');
       changeUrl();
       $('.cuba').css('background', "url(images/" + ambiente + "/produtos/" + imgCuba + "/" + imgCuba + ".jpg)");
});

Answer 1

因为它是在运行时生成的，所以请尝试使用event delegation！

$('.list-cubas-funzionale').on('click','.cuba-img', function () {
    // Rest of the code
})

Answer 2

因为AJAX（和getJSON）以异步方式运行。在元素存在之前，您的点击处理程序会被绑定。使用delegation或绑定ajax回调中的事件。

$('.list-cubas-funzionale').on('click', '.cuba-img', function () {
       alert('teste');
       imgCuba = $(this).attr('data-cuba');
       changeUrl();
       $('.cuba').css('background', "url(images/" + ambiente + "/produtos/" + imgCuba + "/" + imgCuba + ".jpg)");
});

为什么我的'click'函数在'each'函数后没有执行？

2 个答案: