我很困惑,因为我之前做过类似的事,但我根本不理解结果行为。我正在从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));
}
});
});
答案 0 :(得分:0)
目前,您正在调用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);
});