Question

我很困惑，因为我之前做过类似的事，但我根本不理解结果行为。我正在从JSON列表生成<li>个元素。然后我（显然）将它们附加到<ul>元素。每个<li>都有自己对我编写的click事件方法的引用。出于某种原因，每当我点击一个项目时，它就会开始触发多个点击事件。它的行为就好像为每个项目分配了其他项目的所有事件。但是，我认为下面的代码不应该那样。任何人都有任何想法我做错了什么？感谢。

Item and Click event generation:

success: function (data) {
    $.each(data.Spellbook, function (index, spell) {
        $("#Spellbook").append(
            $("<li />").on("click", ViewSpell(spell.Id, CharacterID, ClassId, data.SpellLevel, true))
            .addClass("selector").text(spell.Name)
        );
    });
},

Click Event:

var ViewSpell = (function (SpellId, CharacterId, ClassId, SpellLevel, CanBeDeleted) {
    $.ajax({
        url: url.SpellDetails,
        cache: false,
        type: "GET",
        data: {
            SpellId: SpellId,
            CharacterId: CharacterId,
            ClassId: ClassId,
            SpellLevel: SpellLevel,
            CanBeDeleted: CanBeDeleted
        },
        success: function (data) {
            $("#SpellDetails").html(data);
        },
        error: function (xhr, state, thrownError) {
            $("#SpellDetails").html(JSON.stringify(xhr));
        }
    });
});

Answer 1

目前，您正在调用ViewSpell并传递其返回值。由于您使用$.each()多次执行

我建议您存储需要传递到数据缓存中ViewSpell的数据。可以使用$.fn.data()

存储和提取哪些内容

$.each(data.Spellbook, function (index, spell) {
    var li = $("<li />")
        .addClass("selector")
        .text(spell.Name)
        .data('spell', spell)
        .data('characterid', CharacterID)
        .data('classid', ClassId)           
        .on("click", function(){
            var s = $(this).data('spell');
            ViewSpell(s.Id, $(this).data('characterid'), $(this).data('classid'), s.SpellLevel, true);
        });

    $("#Spellbook").append(li);
});

在生成的元素上触发多次单击事件

1 个答案: