javascript - javascriptを使用してonclickを設定します

Answer 1

最初：jQueryのすべてのタイプのセレクター、ドル記号と括弧で始まります：$（）
2番目：ステートメントをで閉じる必要があります;
最後：関数を呼び出す前に、JavaScriptに依存するのではなく、関数を定義することをお勧めします。あなたのためにそれらを上に持ち上げます。これにより、jslintも検証されますが、逆の場合は検証されません。

したがって、エラーのないコードは次のようになります。

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

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

動作するデモについては、このフィドルを参照してください。

幸運を！！

---

あなたの更新された質問について：
それはあなたの質問に対するかなりの更新です。

domでonclickイベントを設定したため、console.logにonclickは表示されません。console.logでonclickを確認したい場合は、以下を使用して関数STRINGを追加します。
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>

この説明の実際の例については、このフィドルを参照してください。

また、を使用しているため、（知らないうちに）何らかの形式のjQueryをすでに使用していると思います.children("div#myDiv")。私の知る限り、これは単純なバニラJavaScriptではありません。そして、プレーンなバニラjavascriptとjQueryの両方が、プレーンなhtml文字列からID'myDiv'のdivを選択しないので、更新のコードはその役割を果たさないと思います。

最後に、更新された質問と、解析されたhtml-sourceに表示されるonclick-eventの期待に対する私の答えを調整するには、次のようにします。

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;

この更新されたフィドルを参照して、実際の動作を確認してください。

それは疑問を残します：なぜあなたはあなたの変数名の前に「忍者」$-記号を置くのですか？

Answer 2

これは、デバッガーがHTML要素を表示する方法です。すべての属性が表示されるわけではありません。特に、DOMプロパティを関数参照に設定しているため、文字列を受け取るHTML 属性onclickとして表示することはできません（ onclickJavaScriptでは設定できないAFAIKLucのコメントを参照してください）。

代わりconsole.log(element.onclick);に、のようなものが表示されるはずですfunction() {...}。

または、イベントハンドルは機能しませんか？

ところで、hrefとハンドラーを設定するためにjQueryを使用しない理由は何ですか？

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

---

もう1つ：ほとんどのコンソールでクリックする<a href="#">と、イベントハンドラーを含むDOMプロパティが表示されます。

Answer 3

私は実際にこれに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/

Answer 4

要素が正しいことを確認しますか？これは私のために働きます。

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

Answer 5

関数は文字列内にある必要があります。引用符を追加してみてください。