3

誰かが私を助けてくれたら本当にありがたいです。jQuery mobile 1.2 Beta (jQuery 1.7.1 を使用) で折りたたみ可能なブロックを動的に構築しようとしています。

折りたたみ可能なヘッダー内にボタンを配置したいという問題があり、すべて正常に動作しますが、ボタンをクリックすると、設定したクリックイベントが発生せず、代わりにブロックが折りたたまれたり折りたたまれたりします。

$('#main').append('<div data-role="collapsible" data-theme="c" data-content-theme="c" id="pflicht_' 
+ identifier + '" pflichtID="' + val.guid + '">' +
'<h3 style="white-space: normal;" id="inner_header_' + identifier + '">' 
+ header + ': ' + val.pflichtBezeichnung + ' (' + val.Intervall + ' - ' + val.IntModus + ') ' 
+ val.pflichtNummer + '.' + val.pflichtZusatz + 
'<button type="button" data-inline="true" id="ok" pflichtID="' 
+ val.guid + '" identifier="' + identifier + '" >Ok</button></h3>' +
'</div>'

$("#ok").live('click', function () {
                  alert("ok");
              });

ボタンのクリックイベントを取得するにはどうすればよいですか?

ご協力いただきありがとうございます！

4

1 に答える 1

4

まず、 on.liveを支持して非推奨になったことを認識する必要があります。

つまり、ここで何が起こっているのかを理解するには、イベント委任が一般的にどのように機能するかを理解する必要がありますlive。特に、イベント委任を使用する場合、イベントを DOM の上位レベル (親要素) にバインドし、イベントがバブルアップするためです。元のイベントをチェックして、指定されたセレクターと一致するかどうかを確認します。

この.liveメソッドは、イベントを にdocumentバインドし (常に親要素にバインドされます)、イベントが にバブルアップすると、document指定されたセレクターと一致するかどうかを確認します。あなたの場合の問題は、何か (おそらくcollapisple header ) がclickイベントを飲み込んで、ドキュメントに到達しないことです。

解決策は非常に単純です。ボタンに直接バインドするか、DOM の下位レベル (イベントが到達する場所) に委任します。

例えば

$('#inner_header_' + identifier).on('click', '#ok', function(e) {
    alert('ok');
});

ボタンをクリックしたときにヘッダーが展開したり折りたたまれたりしたくない場合は、イベントがさらにバブリングしないようにします。これはstopPropagation()メソッドを使用して行うことができます

例えば

$('#inner_header_' + identifier).on('click', '#ok', function(e) {
    alert('ok');
    e.stopPropagation()
});
于 2012-09-14T14:12:42.673 に答える