Question

使用从ajax成功事件收到的JSON数据，我使用这些数据制作动态html内容，就像这样

function loop_json(data) {
    var response_data = jQuery.parseJSON(data);
    var vip_userId = $('#userId').val();
    $(response_data.vip_poll).each(function(index, value) {
        var t= '';
        t += '<li class="vip-polls-holder" id="'+value.id+'">';
        t += '<div class="user-img">';
        t += '<a href="users.php?user_name='+response_data.vip_pollOwners[index].user_name+'"><img src="'+response_data.vip_pollOwners[index].user_avatar+'" class="user-img-pic img-circle" /></a>';
        t += '</div>';
...
t +='</li>';
$('.vip-polls-holder-ul-mainDIV').append(t);
// And so I attach some functions with these li boxes such as
function1();
function2(); //and
VIP_dNd_multiple();
   });
}

VIP_dNd_multiple（）is-＆gt;

function VIP_dNd_multiple() {

// let it be called part a
$trashVIP.each(function() {
    $(this).droppable({
        accept: "#VIPgalleryMulitple"+$(this).attr('id')+" > li",
        activeClass: "ui-state-highlight",
        drop: function (event, ui) {
            console.log('abc');  //This prints one time
        }
    });
});   

// let it be called part b
$("ul.VIPgalleryMulitple > li").each(function() {

        var $item = $(this);
        $item.click(function (event) {
            event.preventDefault();
            console.log('ok');  //This prints multiple times
        });
    });
}

问题是VIP_dNd_multiple（）被调用多次，因为DOM上存在li元素，因此控制台将'ok'（函数的b部分）作为输出多次输出，这当然是不可取的。我不明白当我在$（this）li上使用click事件时为什么所有li元素都在触发console.log动作？
令人惊讶的是，同一功能的一部分只是正确输出一次控制台。

Answer 1

$TrashVIP的价值是多少？它似乎没有通过LI项目，而是它读取只有一项的UL项目，这就是为什么它会打印一次。

第二个函数调用每个LI项，所以如果你有10个LI项，并且你单击其中一个LI，它确实会通过循环并多次渲染OK。

在我看来，你真的不需要第二个each函数，而是按原样放置click函数，并且一旦任何一个LI项就会触发它点击。

$("ul.VIPgalleryMulitple > li").click(function() {
    event.preventDefault();
    console.log("ok"); 
});

<强> Sample Fiddle

Answer 2

我不知道它是否可以为此提供帮助，但此代码可以多次保存以防止多次事件：

$item.click(function (event) {
    event.preventDefault();
    if (event.handled !== true) {
        event.handled = true;
        //Your stuff
        console.log("ok");
    }
})

Answer 3

我删除了$ .each函数，因为它可能是问题的根源。相反，我改用'on'方法。此外，我在第一次单击后删除了锚元素的id，以在第一次单击后丢弃更多事件。我的最终解决方案结合了A. Rossi回答 - ＆gt;

$("ul.VIPgalleryMulitple > li").on('click', function (event) {

        if (event.handled !== true) {
            event.handled = true;

            var $item = $( this ),

            var ids = $(this).attr('id');

            console.log('ok'); 

            $(this).find('a').removeAttr('id');
        }
        return false;
    });

即使在使用$（this）

3 个答案: