jquery append li＆僅適用於該元素的函數

Question

我需要在每個回車符上添加一個新的列表元素，並且只是通過目測檢查兩個數字來演示成功&失敗。

但是，每次回車被擊中時，函數開始影響先前附加的元素，而不是僅應用於新添加的元素。

我該如何修改所附的'小提琴'中的代碼，以便它只將功能應用於正在追加的最新元素？ http://jsfiddle.net/KrPaj/

var addTray = function(tray) { 
    /* 
     Add the given tray to the list. 

     If this tray already exists, it will be highlighted and no items 
     are added. 

    */ 
    if (!findTrayInList(tray).length) { 
     $('#trays-list li.empty').detach(); 
     // $('input#id_tray').prop('disabled', true); 
     $('#trays-list').append($('<li data-tray="'+ tray +'">'+ tray +'<span></span></li>').hide().fadeIn(1000, function(event) { 
      var number1 = 1 + Math.floor(Math.random() * 2); 
      var number2 = 1 + Math.floor(Math.random() * 2); 
      console.log(number1 + ' ' + number2) 
      currentTray = $(this); 
      console.log(currentTray); 
      currentTray.map(function(e) { 

       currentTray.each(function() { 

        if(number1 === number2) 
        { 
         currentTray.addClass('green').animate({ 
          color:"#00FF00" 
         }, 1000) 
         currentTray.delay(1000).fadeOut(300, function() { 
          currentTray.remove(); 
          //$('input#id_tray').prop('disabled', false); 

         }); 

        } 
        else 
        { 
         currentTray.addClass('red').animate({ color:"red" }, 1000, function() { 
          if(currentTray.children('span').is(':empty')) 
           currentTray.children('span').append(' failed'); 
           // $('input#id_tray').prop('disabled', false); 
         }); 
        } 
       }); 
      }).get(); 

     })); 
     updateHeading(); 
     //trayCheck(); 
    } else { 
     findTrayInList(tray).css('color', 'red').animate({color: '#333'}, 'slow'); 
    } 
}; 

Answer 1

這是一個有點難以看到你想達到什麼樣的，但我相信，你只需要在運行代碼之前的<li>追加。目前你正試圖在連接之前觸發幾件事情。

首先創建它，然後附加它，然後添加淡入完成代碼：

$li = $('<li data-tray="'+ tray +'">'+ tray +'<span></span></li>').hide(); 

$('#trays-list').append($li); 

$li.fadeIn(1000, function(event) { /* code */ } 

希望這是你想要的東西：http://jsfiddle.net/KrPaj/10/