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

StackOverflow https://stackoverflow.com/questions/826628

質問

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

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

誰でもonclick属性を設定して、FirefoxとIE 6/7/8でこの機能を使用できるようにする提案がありますか？また、これをテストするために使用したコードも参照してください。

<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>
役に立ちましたか？

解決

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=""関数をキャンセルする必要があります-そして、あなたの<！> quot; javascriptをstring <！> quot;

最善の方法は、HTMLコードの<a>要素からonclick = function() { return eval(js); }を削除し、 控えめな クリックするイベントをバインドする方法。

あなたも言った：

  

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

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

他のヒント

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

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

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

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

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

JQueryのクリックイベントは、クリック関数$（<！> quot; myelt <！> quot;）。click（function ....）です。

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

jQueryのイベントの詳細についてはこちらをご覧ください

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

<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>

gnarfのアイデアに従うこともできることに注意してください：

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

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

これに対する迅速で汚い修正を見つけました。 <select onchange='this.options[this.selectedIndex].onclick();> <option onclick='alert("hello world")' ></option> </select>

を使用しました

これが役立つことを願って

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top