在jQuery循环json循环后的命令

Question

我有一个jQuery的问题， 当页面加载时，我调用一个json文件并循环其项目。但是我不能附加任何事件监听器来添加输入按钮。

我想例如警报消息做..

我想我粗野，select输入按钮的jQuery

$.getJSON("data.json", function(json) { 
    var html = ""; 
     json['products'].forEach(function(val){ 
     var location = '"?id='+val.id+'"'; 
     html += "<div class='item'>" 
     html += "<div class='item-header'>"; 
     html += "<h3>" + val.item_name + "</h3></div>"; 
     html += "<div class='item-img'>"; 
     html += "<img src='http://www.safensound.com.my/public/images/no_product_img.jpg' title=" + val.item_name + "></img></div>" 
     html += "<div class='item-footer'>"; 
     html += "<p>Country: " + val.country_of_origin + "</p>"; 
     html += "<p>Price: " + val.price + " $</p>"; 
     html += "<input type='button' data-id='"+val.id+"' class='btn btn-success' value='Add to cart'></input>"; 
     html += "</div></div>"; 
     }); 

    $(".items").html(html); 
    }); 

，这是的onclick命令：

$("item-footer>input[type='button']").on("click", function(){ 
    alert("Hi"); 
}); 

Answer 1

对于动态创建的元素，您至少需要一个静态元素，它是其他元素的父级元素：

$("#SOME_STATIC_PARENT").on("click",".item-footer>input[type='button']", function(){ 
    alert("Hi"); 
}); 

在你的榜样，.items可能是很好的，所以：

$(".items").on("click",".item-footer>input[type='button']", function(){ 
    alert("Hi"); 
});