Question

我有一个弹出框，可以通过AJAX检索内容数据并显示此内容。这由异步函数generateInfoboxContent()处理，并且检索的HTML内容为boxText。将显示的内容取决于用户单击的项目。 infoboxes[i].setContent和infoboxes[i].open()是将内容添加到HTML页面的函数。

问题：我想使用infobox_header_favorite使用jQuery在此动态生成的内容boxText中选择div .click()，但点击处理程序似乎不是触发！我怎样才能解决他的问题？

jQuery代码

(function(i) {
    var boxText = generateInfoboxContent(infoboxes[i].listing_id, function(boxText) {
        infoboxes[i].setContent(boxText);
        infoboxes[i].open(map, markers[i]);
        infoboxes[i].show();
        infoboxes_open.push(infoboxes[i]);

        console.log('Hello');
        // Favorite function
        $("#infobox_header_favorite").click(function() {
            console.log('favorite!');
            toggleFavorite(infoboxes[i].listing_id);
        });
    });
})(i);

结果

Hello已写入控制台，但在单击div favorite!时，infobox_header_favorite未写入控制台日志。

更新

jQuery代码

$.getJSON(base_url + 'index.php/main/getplaces', 
    { data: data }, 
    function(json){


        for( i = 0; i < json.length; i++) {

            (function(i) {
                var boxText = generateInfoboxContent(infoboxes[i].listing_id, function(boxText) {
                    infoboxes[i].setContent(boxText);
                    infoboxes[i].open(map, markers[i]);
                    infoboxes[i].show();
                    infoboxes_open.push(infoboxes[i]);

                    console.log('Hello');
                    // Favorite function
                    $("#infobox_header_favorite").click(function() {
                        console.log('favorite!');
                        toggleFavorite(infoboxes[i].listing_id);
                    });
                });
            })(i);

        }


    });

更新2

for( i = 0; i < json.length; i++) {

            (function(i) {
                var boxText = generateInfoboxContent(infoboxes[i].listing_id, function(boxText) {
                    infoboxes[i].setContent(boxText);
                    infoboxes[i].open(map, markers[i]);
                    infoboxes[i].show();
                    infoboxes_open.push(infoboxes[i]);

                    console.log('Hello');
                    // Favorite function
                    $("#infobox_header_favorite").on("click", function() {
                        console.log('asd');
                        toggleFavorite(infoboxes[i].listing_id);
                    });
                });
            })(i);

        }

收到错误Uncaught TypeError: Object [object Object] has no method 'on'

Answer 1

使用.live()或.on()将事件绑定到动态添加的元素。

jQuery 1.7中不推荐使用

.live()

无法使用jQuery选择div（动态生成）

1 个答案: