Javascript에서 추가 된 html이 전체적으로 선택 가능하지 않습니까?

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