在JavaScript中添加onclick事件以添加新元素

我一直在嘗試將onclick事件添加到使用JavaScript添加的新元素。在JavaScript中添加onclick事件以添加新元素

問題是當我檢查document.body.innerHTML我實際上可以看到onclick = alert（'blah'）被添加到新元素。

但是，當我點擊該元素，我沒有看到警告框正在工作。事實上涉及到JavaScript的東西不工作..

這裏是我用它來添加新的元素：

function add_img() { 
    var elemm = document.createElement('rvml:image'); 
    elemm.src = 'blah.png'; 
    elemm.className = 'rvml'; 
    elemm.onclick = "alert('blah')"; 
    document.body.appendChild(elemm); 
    elemm.id = "gogo"; 
    elemm.style.position='absolute'; 
    elemm.style.width=55; 
    elemm.style.height=55; 
    elemm.style.top=200; 
    elemm.style.left=300; 
    elemm.style.rotation=200; 
}

這是我如何調用該函數：

<button onclick=add_img()>add image</button>

現在圖像完美地在瀏覽器內部繪製。但是當我點擊圖片時，我沒有那麼警覺。

來源

2010-07-23 SolidSnake

哦，jQuery的美麗。也許這會對未來有所幫助:) $（'。rvml'）。live（'click'，function（）{alert（1）;}）; – 2010-07-23 07:45:41

.onclick應該設置爲函數而不是字符串。嘗試

elemm.onclick = function() { alert('blah'); };

改爲。

來源

2010-07-23 07:42:06 kennytm

完美謝謝:) – SolidSnake 2010-07-23 07:45:50

這是否適用於IE8？ – human 2016-12-01 01:56:11

@human我很確定它可以一直回到IE4。 – kennytm 2016-12-01 03:21:40

不知道，但嘗試：

elemm.addEventListener('click', function(){ alert('blah');}, false);

來源

2010-07-23 07:42:55

即使使用'.addEventListener'，第二個參數仍然需要是一個函數而不是字符串。 – kennytm 2010-07-23 07:46:51

使用jQuery我不記得這一個;）謝謝 – 2010-07-23 07:52:00

這不會在IE8中工作：http://caniuse.com/#search=addEventListener – 2015-12-31 09:39:52

無法通過字符串指定的事件。使用：

elemm.onclick = function（）{alert（'blah'）; };

來源

2010-07-23 07:43:41 MinhNguyen

簡短的回答：你要設置的處理程序函數：

elemm.onclick = function() { alert('blah'); };

稍長的答案：你必須寫代碼的幾行，以獲取跨瀏覽器的一致性。

事實上，即使是可能通過一組常見瀏覽器解決特定問題的細長代碼仍然會帶來問題。所以如果你不關心跨瀏覽器的支持，那就用完全短的支持吧。如果你關心它，並且絕對只想得到這個單一的東西，那麼結合使用addEventListener和attachEvent。如果您希望能夠在整個代碼中廣泛地創建對象並添加和刪除事件偵聽器，並希望在瀏覽器中工作，那麼您一定要將該責任委派給諸如jQuery之類的庫。

來源

2010-07-23 07:44:15

我只需要這個Internet Explorer .. 短的一個像魅力一樣工作。感謝您的詳細解決方案，雖然 – SolidSnake 2010-07-23 07:59:29

我不認爲你可以這樣做。您應該使用：

void addEventListener( 
    in DOMString type, 
    in EventListener listener, 
    in boolean useCapture 
);

文檔right here。

來源

2010-07-23 07:44:52

你有三個不同的問題。首先，應該引用HTML標記中的值！不這樣做可能會混淆瀏覽器，並可能導致一些麻煩（儘管在這裏可能不是這種情況）。其次，您應該像其他人所說的那樣，將一個函數實際分配給onclick變量。這不僅是繼續前進的正確方法，而且如果您嘗試在onclick函數中使用局部變量，它會使事情變得更加簡單。最後，您可以嘗試addEventListener或jQuery，jQuery具有更好的界面。

哦，並確保您的HTML驗證！這可能是一個問題。

來源

2010-07-23 07:51:41 crazy2be

我在本地使用。所以它不會成爲我的問題.. 關於jQuery我不喜歡，因爲我無法控制一切，它只是混亂了很多的代碼，它會影響其他JavaScript庫。我寧願建立我自己的庫，而不是浪費時間來弄清楚如何使用jQuery。感謝您的幫助，雖然:) – SolidSnake 2010-07-23 08:08:30

-1

如果你不想寫出你曾經寫過的函數中所有你寫過的函數。請使用下面的代碼，使用jQuery：

$（element）.on（'click'，function（）{add_img（）;}）;

來源

2015-12-17 07:29:24 Prateek

在JavaScript中添加onclick事件以添加新元素

回答

相關問題