2011-12-19 84 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