設置onclick <a>使用javascript

Question

我想要更改div中的所有鏈接，使其不再引用頁面，但在單擊時運行javascript函數。要做到這一點，我寫了這個功能：

function buildPageInDiv(htmlString){ 
    console.log(typeof htmlString); 
    $div = $(htmlString).children("div#myDiv"); 
    $div.children("a").each(function(i, element){toJavascriptLinks(element)}); 
    document.getElementById("targetDiv").innerHTML = $div[0].innerHTML; 
} 

調用這個函數：

function toJavascriptLinks(element){ 
    element.href="#"; 
    element.onclick  = function(){console.log('Yeah!')}; 
    console.log(element); 
} 

現在，當我運行「buildPageInDiv」，「串」被打印在控制檯上，所有的「href」點擊看原圖

<a href="#"> 

的任何跡象，並點擊鏈接不顯示在控制檯上的任何內容：變更爲「＃」併爲每股利控制檯打印的元素中。

我在這裏錯過了什麼？

編輯：

我正在尋找錯誤的地方。問題在於，在將innerHTML附加到'targetDiv'之前，我正在運行'toJavascriptLinks（element）'。對於href屬性來說這不成問題，但它是針對onclick屬性的。簡單的辦法就是把它放在「targetDiv」第一，比運行「toJavascriptLinks（元素）」開「targetDiv」：

function buildPageInDiv(htmlString){ 
    console.log(typeof htmlString); 
    var content = $(htmlString).children("div#myDiv")[0].innerHTML; 
    document.getElementById("targetDiv").innerHTML = content; 
    $("div#targetDiv").children("a").each(function(i, element) toJavascriptLinks(element)}); 
} 

問題雖然沒有在代碼中，我最初發布，下面全面的解答使我到解決方案。

Answer 1

第一：所有類型的jQuery選擇的，開始與美元符號和括號：$（）
其次：你需要與;
最後關閉的語句：這是很好的做法定義函數之前，你打電話給他們，而不是依靠JavaScript來提升他們到你的頂部。這也將使jslint驗證，而其他方式不會！

所以你的代碼，而你的錯誤看起來像：

function toJavascriptLinks(element){ 
    element.href="#"; 
    element.onclick  = function(){alert('Yeah!');}; 
    console.log(element); 
} 

$('div').children("a").each(function(i, element){toJavascriptLinks(element);}); 

了工作演示見this fiddle。

祝您好運！

---

關於您更新的問題：
這是相當更新了自己的問題。

因爲您在dom中設置了onclick事件，所以在console.log中沒有看到onclick。如果你想在控制檯中看到onclick。登錄，您會使用添加函數字符串：
element.setAttribute('onclick', 'your function string');

假設在你的HTML您有：

<a id="link_a" href="http://www.google.com">link 1</a> 
<a id="link_b" href="http://www.duckduckgo.com">link 2</a> 

而且你有這樣的javascript：

var lnkA=document.getElementById("link_a"); 
var lnkB=document.getElementById("link_b"); 

lnkA.onclick=function(){alert(this.innerHTML);}; 
lnkB.setAttribute('onclick','alert(this.innerHTML);'); 

console.log(lnkA.outerHTML); 
console.log(lnkB.outerHTML); 

隨後的console.log將包含：

<a id="link_a" href="http://www.google.com">link 1</a> 
<a onclick="alert(this.innerHTML);" id="link_b" href="http://www.duckduckgo.com">link 2</a> 

Se e this fiddle爲這個解釋的生動的例子。

我也認爲你已經在使用某種形式的jQuery（不知道它是什麼），因爲你使用了.children("div#myDiv")。據我所知，這不是普通的香草javascript。我認爲普通的香草javascript和jQuery都不會選擇id爲'myDiv'的div，而是使用純html字符串，因此您的更新中的代碼而不是可以完成這項工作。

最後，我的回答調整的onclick事件是在解析的HTML源可見的更新的問題和期望：

var htmlString='<div id="myDiv"><a href="http://www.google.com">link 1</a><a href="http://www.duckduckgo.com">link 2</a></div><div id="otherDiv"><a href="http://www.asdf.com">link 3</a><a href="http://www.yahoo.com">link 4</a></div>'; 

function toJavascriptLinks(element){ 
    element.href="#"; 
    element.setAttribute('onclick','console.log("Yeah!");'); 
    console.log(element.outerHTML); 
} 

//no innerHTML on documentFragment allowed, yet on it's children it's allowed 
var frag = document.createDocumentFragment().appendChild(document.createElement('div')); 
frag.innerHTML=htmlString; 

var $div = $(frag).children('div#myDiv'); 

$($div).children("a").each(function(i, element){toJavascriptLinks(element);}); 


var outp=document.getElementById("output"); 
outp.innerHTML=frag.innerHTML; 

見​​看到它在行動。

這就留下了一個問題：爲什麼你要在你的變量名稱的前面放置'ninja'$ -signs？

Answer 2

功能需要在一個字符串內，嘗試添加引號？

Answer 3

確定元素是否正確？這對我有用。

<a id="mylink">Test</a> 
<script> 
    document.getElementById("mylink").onclick = function() { 
     alert("Works"); 
    }; 
</script> 

Answer 4

這只是調試器顯示HTML元素的方式。它不顯示所有屬性 - 尤其是因爲你財產onclick設置DOM一個函數參考，不能顯示爲HTML 屬性onclick這需要一個字符串（這AFAIK不能設置與JavaScript見Luc的評論）。

嘗試console.log(element.onclick);而不是，它應顯示類似function() {...}。

或者事件處理不工作？

順便說一句，任何你不使用jQuery來設置href和處理程序的原因？

$div.children("a").attr('href', '#').click(function(){console.log('Yeah!')}); 

---

一件事：在大多數遊戲機，你可以在<a href="#">點擊，它會顯示DOM屬性，其中應包括事件處理程序。

Answer 5

我真的會用這個jQuery，這很簡單。

​$(function() { 
    $("div > a ").attr("href", "#").click(function(e) { 
     e.preventDefault(); 
     doSomething(); 
    }); 
}); 

var doSomething = function() { 
    alert("Woah, it works!"); 
} 

請參見下面的jsfiddle它在行動：http://jsfiddle.net/SsXtt/1/