在生成的元素上點擊多次點擊事件

我很困惑，因爲我之前做過類似的事情，但我根本不瞭解結果行爲。我正在從JSON列表生成<li>元素。我當時（顯然）將它們追加到<ul>元素。每個<li>都會自己引用我寫的點擊事件方法。出於某種原因，只要我點擊一個項目，它就會開始觸發多個點擊事件。它表現得好像每個項目都被分配了其他項目的所有事件。但是，我認爲下面的代碼不應該這樣做。任何人有任何想法我做錯了什麼？謝謝。在生成的元素上點擊多次點擊事件

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)); 
     } 
    }); 
});

來源

2015-06-16 Robert Burke

您應該追加元素並單獨聆聽'點擊'。添加一個li，獲得一個jquery $（'li'）。on（'click'，function（）{...}）; – depperm

所以你說我把我的「成功」結束了？我仍然好奇爲什麼我描述的行爲正在發生，因爲我之前創建了元素，併爲for循環中的每個元素分配了點擊事件，而沒有發生這種行爲。 –

目前要調用的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); 
});

來源

2015-06-16 20:00:16 Satpal

謝謝。這似乎是有道理的。我想，因爲它們都是函數，所以我不需要把函數放在這樣的「回調」函數中。但我明白爲什麼。如果我剛剛完成ViewSpell，沒有括號，這種情況不會發生，但我顯然需要傳遞一些參數給它。感謝您的解決方案和其他建議。 –

在生成的元素上點擊多次點擊事件

回答

相關問題