附加的HTML不能在Javascript中全局選擇？

Question

我正在努力圍繞什麼技術應該使用什麼時候我的頭。我想他們只是稱之爲「學習曲線」。

爲什麼，當這樣寫的點擊功能的工作原理：

$(document).ready(function() { 

    var Item = { 
     list: function() { 
      $.getJSON("output.php", function(data) { 
       $.each(data, function(key, val) { 

        $("ul#list").append(
         '<li id="id' + val.id + '" class="itemContainer item' + val.category + '">' + 
         '<div class="item">' + 
          '<button name="plus" type="button" value="0" class="itemPlus">+</button>' + 
          '<button name="minus" type="button" value="0" class="itemMinus">-</button>' + 
         '</div>' + 
         '</li>' 
        ); 
       }); 

       $("button").on("click", function() { 
        alert($(this).attr("name")); 
       }); 
      }); 


     } 
    } 

    Item.list(); 


}); 

，不以這種方式工作：（請注意，我感動$（「按鈕」）在...外面。對象）

$(document).ready(function() { 

    var Item = { 
     list: function() { 
      $.getJSON("output.php", function(data) { 
       $.each(data, function(key, val) { 

        // HTML for Items. jQuery UI Templates? 
        // Select where list starts 
        $("ul#list").append(
         '<li id="id' + val.id + '" class="itemContainer item' + val.category + '">' + 
         '<div class="item">' + 
          '<div class="catLabel"><div class="catColor catColor' + val.category + '"></div></div>' + 
          '<h2 class="itemTitle">' + val.title + '</h2>' + 
          '<img class="itemPic" src="img/noPic.gif" alt="No Picture Yet">' + 
          '<p class="itemDesc">' + val.desc + '</p>' + 
          '<hr/>' + 
          '<p class="itemDayPrice"><span class="itemDays">1</span> <a href="#">Day</a> Rental <sup>$</sup><span class="itemPrice">' + val.price + '</span></p>' + 
          '<button name="plus" type="button" value="0" class="itemPlus">+</button>' + 
          '<button name="minus" type="button" value="0" class="itemMinus">-</button>' + 
         '</div>' + 
         '</li>' 
        ); 
       }); 


      }); 


     } 
    } 

    Item.list(); 

    $("button").on("click", function() { 
     alert($(this).attr("name")); 
    }); 

}); 

我不知道是否它的jQuery選擇器需要在裏面，或點擊函數本身。任何幫助理解這將不勝感激。有更好的方法我應該寫這樣的代碼嗎？

任何關於js代碼寫作風格的建議也將被讚賞，因爲我有一種感覺我的可怕。

在此先感謝！

Answer 1

$(document).on("click", "button", function() { 
    alert($(this).attr("name")); 
}); 

您已添加動態元素。他們應該被授權。所以，使用以上的東西來使其工作。

Answer 2

試試這個。這是需要委派它的注入內容。

$("ul#list").on("click", "button", function() { 
    alert($(this).attr("name")); 
});