jQuery函數JS innerHTML屬性

我在我的應用程序使用此代碼後不工作：jQuery函數JS innerHTML屬性

document.getElementById("inventory_box").innerHTML = "<img src='./img/rock.gif' id='test' />";

的#inventory_box元素存在了，所以它只是噴出了IMG到#inventory_box。

我想要的是能夠單擊此出現IMG與ID名稱test，但不會像工作：

$("#test").click(function() { 
       // Run this 
      });

2013-10-07 Naoto Ida

嘗試，而不是如果你使用最新版本的jquery .. – codebreaker

試試這個，

$(document).on('click',"#test",function() { 
    alert('test'); 
});

讀

2013-10-07 11:49:03

由於圖像動態添加，你需要使用event delegation註冊事件處理程序

// New way (jQuery 1.7+) - .on(events, selector, handler) 
$('#inventory_box').on('click', '#test', function() { 
     // Run this 
});

這將#inventory_box元素中的事件附加到test圖像元素，減少不必檢查整個document元素樹和提高效率的範圍。

2013-10-07 11:49:46

謝謝，但這似乎並沒有工作。 Rohan的一個似乎爲我工作......將使用Rohan的那個表現慢下來？ –

是，櫃面你沒有一個最近的父選擇器（已經存在於DOM），你將不得不使用'document'元素。唯一的問題是，代碼將檢查整個文檔元素樹中是否添加了新圖像，這需要一些時間！ –

事件處理程序的分配運行之前存在具有這種ID的元素，所以你創建一個元素後，它不會有一個分配給它的任何事件處理程序。

至於有人建議解決這個常見的JavaScript錯誤，最簡單的方法，你可以指定事件的容器DOM元素和使用jQuery的事件代表團開槍事件新添加的DOM元素的事件。

但我寧可不使用這種方法，我不能給你的原因，說，我只是單純的不喜歡。

創建元素之後始終分配事件。例如：

document.getElementById("inventory_box").innerHTML = "<img src='./img/rock.gif' id='test' />";

立即在此之後，執行此：

$("#test").click(function() { 
       // Run this 
      });

2013-10-07 11:58:44

$('#inventory_box img').click(function() { 
     // Run this 
});

2013-10-07 12:10:56 Anup

考慮使用，而不是innerHTML的 '追加'。使用混合的vanilla JavaScript & jQuery似乎在使用新元素更新DOM時造成了一些延遲。下面的代碼適用於我。

$("#inventory_box").append("<img src='./img/rock.gif' id='test' />") 

$('#test').click(function(d){console.log("clicked!");});

2013-10-07 12:24:33

回答