web-dev-qa-db-ja.com

JavaScript：jQueryの有無にかかわらずonclickの値を変更する

アンカーのonclick属性の値を変更したいのですが。 JavaScriptを含む新しい文字列に設定したい。 （この文字列はサーバーによってクライアント側のJavaScriptコードに提供され、HTMLのonclick属性に含めることができるものは何でも含めることができます。）私が試したいくつかのことを次に示します。

  • JQuery attr("onclick", js)の使用は、FirefoxとIE6/7の両方で機能しません。
  • setAttribute("onclick", js)を使用すると、FirefoxとIE8で動作しますが、IE6/7では動作しません。
  • returnはonclick = function() { return eval(js); }に渡されるコードであるため、eval()を使用しても機能しません。

FirefoxおよびIE 6/7/8でこの機能を動作させるために、onclick属性を設定することを提案している人はいますか？また、これをテストするために使用したコードも参照してください。

<html>
    <head>
        <script type="text/javascript"
                src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var js = "alert('B'); return false;";
                // Set with JQuery: doesn't work
                $("a").attr("onclick", js);
                // Set with setAttribute(): at least works with Firefox
                //document.getElementById("anchor").setAttribute("onclick", js);
            });
        </script>
    </head>
    <body>
        <a href="http://www.google.com/" id="anchor" onclick="alert('A'); return false;">Click</a>
    </body>
</html>
javascriptjqueryonclickattributes
48
avernet

JQueryを使用している場合は、onClickを使用しないでください。 jQueryは、イベントをアタッチおよびバインドする独自のメソッドを提供します。 .click() を参照してください

_$(document).ready(function(){
    var js = "alert('B:' + this.id); return false;";
    // create a function from the "js" string
    var newclick = new Function(js);

    // clears onclick then sets click using jQuery
    $("#anchor").attr('onclick', '').click(newclick);
});
_

これでonClick関数がキャンセルされ、「javascript from a string」も保持されます。

最善の方法は、HTMLコードの_onclick=""_要素から_<a>_を削除し、 Unobtrusive クリックするイベントをバインドする方法。

あなたも言った：

onclick = function() { return eval(js); }を使用しても、eval（）に渡されるコードでreturnを使用することは許可されないため、機能しません。

いいえ-ありませんが、onclick = eval("(function(){"+js+"})");は関数のエンクロージャーで 'js'変数をラップします。 onclick = new Function(js);も同様に機能し、読みやすくなります。 （大文字のFに注意）- Function()コンストラクターのドキュメント を参照

74
gnarf

ところで、JQueryを使用しなくてもこれを行うことはできますが、IE /非IEのみを考慮するため、明らかにかなりugいです。

if(isie)
   tmpobject.setAttribute('onclick',(new Function(tmp.nextSibling.getAttributeNode('onclick').value)));
else
   $(tmpobject).attr('onclick',tmp.nextSibling.attributes[0].value); //this even supposes index

とにかく、多くの人がこの迷惑につまずいたと確信しているので、人々が何ができるかについての全体的な考えを持っているように。

3
Eduardo

Jqueryの落とし穴の1つは、クリック機能がHTMLからのハンドコーディングされたonclickを認識しないことです。

だから、あなたはほとんど選択する必要があります。すべてのハンドラーをinit関数で設定するか、すべてのハンドラーをhtmlで設定します。

JQueryのクリックイベントは、クリック関数$（ "myelt"）。click（関数....）です。

0
Tom Hubbard

以下のgnarfのアイデアも実行できることに注意してください。

var js = "alert('B:' + this.id); return false;";<br/>
var newclick = eval("(function(){"+js+"});");<br/>
$("a").get(0).onclick = newclick;

これにより、イベントをトリガーせずにonclickが設定されます（ここで同じ問題が発生し、見つけるのに時間がかかりました）。

0
Eduardo

jQueryバインドメソッド！jquery-selector！.bind（ 'event'、！fn！）;を使用するだけです。

jQueryのイベントの詳細については、こちらを参照

0
Ilya Khaprov

実際に新しいページに移動したくない場合は、このようにページのどこかにアンカーを設定することもできます。

<a id="the_anchor" href="">

そして、JavaScriptの文字列をアンカーのonclickに割り当てるには、これを別の場所（つまり、ヘッダー、本文の後半など）に配置します。

<script>
    var js = "alert('I am your string of JavaScript');"; // js is your string of script
    document.getElementById('the_anchor').href = 'javascript:' + js;
</script>

ページを送信する前にサーバーにこの情報がすべて揃っている場合は、次のようにアンカーのhref属性にJavaScriptを直接配置することもできます。

<a href="javascript:alert('I am your script.'); alert('So am I.');">Click me</a>
0
ntownsend