2011-12-19 63 views
0

我有一个弹出框,通过AJAX检索内容数据并显示此内容。这由异步功能generateInfoboxContent()负责,检索的HTML内容是boxText。将显示的内容取决于用户点击的项目。 infoboxes[i].setContentinfoboxes[i].open()是将内容添加到HTML页面的函数。无法使用jQuery选择div(动态生成)

问题:我想使用jQuery使用.click()但点击处理程序似乎并没有被触发此动态生成的内容boxText中选择一个div infobox_header_favorite!我怎样才能解决他的问题?

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被写入到控制台,但favorite!点击股利infobox_header_favorite当没有写入控制台日志。

UPDATE

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

     } 


    }); 

UPDATE 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'

+0

被弃用有没有在你的页面的ID“#infobox_header_favorite”的实际元素?我们需要更多信息。 – 2011-12-19 17:55:15

+0

'

'是'boxText'的一部分。直到'infoboxes [i] .open()'执行完毕才会存在。 – Nyxynyx 2011-12-19 17:57:12

+0

如果您不创建多个与infobox_header_favorite id绑定,该怎么办?或者你正在创建多个具有相同ID的元素... – Alfabravo 2011-12-19 18:29:04

回答

2

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

.live() jQuery的1.7

+0

http://api.jquery.com/on/ – jrummell 2011-12-19 18:00:44

+0

刚刚更新了代码以显示从0到json.length'的循环,并在每个循环我将添加'$(“#infobox_header_favorite”)。click(function())'因为我需要传递一个唯一的整数'infoboxes [i] .listing_id'到click处理函数内的'toggleFavorite()'函数。这可以使用'.on()'完成吗?会不会有混乱,因为会有很多'.on()'处理程序,每个都会传递一个不同的整数? – Nyxynyx 2011-12-19 18:05:06

+0

尝试''(“#infobox_header_favorite”)。on('click')',但得到错误'Uncaught TypeError:Object [object Object] has'method'on'' – Nyxynyx 2011-12-19 18:09:56