9

したがって、ボタンをクリックしたときに何かを実行したい場合は、次のいずれかを実行できます。

<!-- EXAMPLE A-->
<input type="button" onclick="alert('hello world');">

または私ができる

<!-- EXAMPLE B-->
<input type="button" id="clickme">
<script>
   $('#clickme').on("click",function(){alert('hello world');});
</script>

またはもちろん、任意のバリエーション ( on change、 on hover) とショートカット ( .click() .change()) が可能です...

A が短いという事実以外に、違いは何ですか? どちらが優れているのか、その理由は?

.html()サイトに要素 (ボタンなど) を動的に追加するために使用する場合、B はこの新しく作成されたボタンでは機能せず、A を使用する必要があることに気付きました...

どんな洞察も役に立ちます！

4

4 に答える 4

1

最初のアプローチでは 1 つのクリック リスナーしか登録できませんが、2 番目のアプローチでは必要な数だけ登録できます。

動的に追加された要素のクリック音も聞きたい場合は、 を使用する必要があります.on()。これを示すコードを次に示します ( jsfiddle )。

HTML

<div id="mainDiv">
<span class="span1">hello</span>
</div>

JS

$(document).on("click", ".span1", function () {
   $( "#mainDiv" ).append("<span class=\"span1\">hello</span>");
});

$(".span1").click( function () {
   console.log( "first listener" );
}); 

$(".span1").click( function () {
   console.log( "second listener" );
});

first listenerandsecond listenerは最初の hello をクリックしたときにのみ出力さspanれますが、いずれかのスパンをクリックすると new が追加されることに注意してください。

于 2013-07-31T03:47:43.543 に答える
0

これがあなたの本当の質問だと思います：

.html() を使用して要素をサイトに動的に追加する場合 (ボタンなど)、B はこの新しく作成されたボタンでは機能せず、A を使用する必要があることに気付きました...

.on()関数でセレクターを使用するだけで、複数の要素に対して重複するIDの代わりにクラスを使用します。

$('document').on("click", ".myButtons", function(){
    alert('hello world');
});

ボタン - クラスに変更します (ID を使用する場合、最初のクラスのみが選択されます):

<input type="button" class="myButtons" />
<input type="button" class="myButtons" />

.on()これは、イベント ハンドラーを新しい要素にアタッチするために使用する方法です。

https://stackoverflow.com/a/14354091/584192

于 2013-07-31T03:47:28.737 に答える
-1

動作の違いです。click() を使用する場合は複数の fn を追加できますが、属性を使用する場合は 1 つの関数のみが実行されます - 最後の関数

HTML-

<span id="JQueryClick">Click #JQuery</span> </br>
<span id="JQueryAttrClick">Click #Attr</span> </br>

Js-

$('#JQueryClick').on("click", function(){alert('1')});
$('#JQueryClick').on("click", function(){alert('2')});

$('#JQueryAttrClick').attr('onClick'," alert('1')" );//this doesn't work    
$('#JQueryAttrClick').attr('onClick'," alert('2')" );

パフォーマンスについて話している場合、いずれにしても直接使用する方が常に高速ですが、属性を使用すると、1 つの関数しか割り当てることができません。

これを試して

参照

于 2013-07-31T07:29:39.737 に答える