Question

我已经看过所有与循环内部的Javascript点击事件问题相关的主题，然后发布到此处：

我测试了像使用闭包或JQuery函数和绑定的建议，但我的代码仍然无法正常工作。这是我的代码的当前状态：

 for (var key in hotels) {
    if (hotels.hasOwnProperty(key)) {
        for (var i = 0; i < hotels.HotelListResponse.HotelList.HotelSummary.length; i++) {
            hotelGlobal.push('<li style="font-size:18px;font-weight:bold;">' + '<button id="book-infos" class="btn btn-default" style="background-color:#ffc100;font-weight:bold;float:right;display:inline-block;">More</button><br/><hr/>');

            $(document).on( 'click', '#book-infos', function () {
                console.log(hotels.HotelListResponse.HotelList.HotelSummary[i]);
            });

        }
    }
}

$('ul[id="hotel-list"]').append(hotelGlobal);

基本上，我遍历酒店对象女巫包含有关独特酒店的所有信息，如姓名，地址，价格，房间图片等等......然后在这个循环内我想添加一个按钮＆＃34;更＆＃34;对于我酒店列表中的每个独特酒店项目。当用户点击＆＃34;更多＆＃34;时，他会看到一个弹出窗口，其中包含与列表中点击的酒店相关的所有信息。我想知道如何将传递的i元素影响到一个唯一的按钮并使click事件有效？

Answer 1

我认为你应该做更多这样的事情：

var hotels;
$('button').on( 'click', '#book-infos', function () {
    var id = this.attr('data-id');
    console.log(hotels.HotelListResponse.HotelList.HotelSummary[id]);
});

... ajax功能或任何给你酒店的东西：

hotels = responseData;
for (var key in hotels) {
    if (hotels.hasOwnProperty(key)) {
        for (var i = 0; i < hotels.HotelListResponse.HotelList.HotelSummary.length; i++) {
            hotelGlobal.push('<li style="font-size:18px;font-weight:bold;">' + '<button data-id="'+ i +'" id="book-infos" class="btn btn-default" style="background-color:#ffc100;font-weight:bold;float:right;display:inline-block;">More</button><br/><hr/>');
        }
    }
}

在循环内动态创建的按钮上的Javascript单击事件

1 个答案: