Question

我制作了一个简单的脚本来调用JSON文件并在网站上显示。

不幸的是，它显示了两倍的结果。问题是由图片引起的。如果我删除它们，文本只会显示我想要的一次。

这是脚本

$(function () {

$('#members p, #members p span, #main_content span').on('click', function () {
    var attr = $(this).attr('data-number');
    if (typeof attr !== typeof undefined && attr !== false) {
        var number = $(this).data('number');
        console.log(number);
        $.ajax("members.json", {
            dataType: 'json',
            success: function (response) {

                $(".images_ajax").css('display', 'block');
                $(".images_ajax_sub").append(response[number].img + response[number].text);
            }
        }),
        $(function () {
            $('.close_ajax').click(function () {
                $(".images_ajax_sub h1, .images_ajax_sub p, .images_ajax_sub .iMembers").remove();
                $(".images_ajax").css('display', 'none');
            })
        })
    }
})});

如果我从JSON文件中删除图像，那么我只得到一个未定义的图像，因为缺少的图像不是两个。

以下是JSON文件的一部分

"name": {
"img": "<div class=\"iMembers\"><img src = \"../images/images/images_of_members/some.jpg\"></div>",
"text": "<p>some text</p>"
}

Answer 1

我最好的猜测是你的AJAX调用会被触发两次。看一下click处理程序绑定到的DOM节点：

$('#members p, #members p span, #main_content span').on('click ...
   ^^^^^^^^^^  ^^^^^^^^^^^^^^^

由于您没有阻止事件冒泡，因此单击span会触发绑定事件处理程序，然后冒泡DOM并再次触发span父项节点：p。因此，尝试绑定到或。

重复的JSON结果

1 个答案: