0

jQuery Mobileのリストビューにコンテンツを追加すると、クリックしてもクリックイベントがトリガーされません。以下の私の例では、「キャデラック」はクリックできません。私は何か間違ったことをしていますか？

HTML：

<div data-role="page" id="p1">
    <ul data-role="listview" data-theme="b">
        <li><a href="#">Acura</a></li>
        <li><a href="#">Audi</a></li>
        <li><a href="#">BMW</a></li>
    </ul>
</div>

jQuery：

$('li').on('click',function(){
    alert('clicked');            
});

$('ul').append('<li><a href="#">Cadillac</a></li>');
$('ul').listview('refresh');

問題のjsFiddle

4

4 に答える 4

5

コードをこれに変更してみてください

$('ul').on('click', 'li', function(){   # <-- That's the trick
    alert('clicked');            
});

$('ul').append('<li><a href="#">Cadillac</a></li>');
$('ul').listview('refresh');

編集：この場合、DOMが変更された場合でも、関数はリスト内のすべての要素にon自動的にバインドします。したがって、いつでもリストアイテムを追加できます。それらすべてにクリックイベントバインディングがあります。clickli

ほぼ同じ機能を持つ古いlivejQueryメソッドを使用することは、パフォーマンスが非常に遅いため、悪い考えです。

于 2012-09-09T11:25:43.337 に答える
1

javascriptがコンパイルされた時点では、liは存在していなかったため、ハンドラーは適​​用されていません。その時点で存在する要素に委任する必要があります。

$('ul').on('click','li', function(){
    alert('clicked');            
});

$('ul').append('<li><a href="#">Cadillac</a></li>');
$('ul').listview('refresh');

live()または、、、またはを使用できますがdelegate()、on()パフォーマンスの面で最高です

<ahref ="http://jsfiddle.net/88NHA/1/"rel="nofollow">ワーキングフィドル

于 2012-09-09T11:26:15.777 に答える
0

現在作業中ですこの編集を参照してください

$('ul').append(
    $('<li>').append(
        $('<a>').attr('href','#').append('Cadillac'
)));
于 2012-09-09T12:07:38.813 に答える
0 
$('#p1.ul').on('click', 'li' ,function(){
  //Do your stuff
});

簡単に言うと、バインドしてクリックイベントをオンにします#p1.ul（はい、そうではありませんli）が、liバブリングする前にイベントを受信したかどうかを確認してからul、ハンドラーを実行します。

ここでの4つのオペランド/パラメータ、特に＃1と＃3をよく理解していただきたいと思います。

  1. バインドしているオブジェクト$('#p1.ul')。
    jQueryはすぐにこの式を評価し、結果のすべての要素に関数をバインドします。したがって、このステートメントの実行時にDOMで使用可能だった要素にのみバインドします。

  2. バインドしたいイベントclick

  3. イベントのソースのセレクターイベントは、バインドするとき'li'
    に直接トリガーする必要はありません。ulイベントを受信するのはその子孫のいずれでもかまいません。このイベントは、すべての祖先をカバーするか、伝播が停止するまで上向きにバブルします。すべての要素は、親にバブリングする前にイベントハンドラーを実行する場合と実行しない場合があります。これで、イベントがバインドされた要素にバブルすると、イベントハンドラーを実行する前に、イベントがバブルされた子孫のチェックが行われ、セレクターと一致します。その後、イベントハンドラーが実行され、バブルされます。 （停止しない限り）、そうでなければ単に泡立ちます。'ul''li'

  4. イベントハンドラメソッド

それで？実行時に生成される要素へのバインドを処理するときは、＃1と＃3を正しく選択する必要があります。＃1は、イベントを期待している生涯にわたって存続し、イベントを処理するすべての要素の祖先であるような要素である必要があります。また、ツリー内で可能な限り低くする必要があります（より高い要素を選択すると、パフォーマンスが低下します。順序が高く、子孫の数が多く、より多くのイベントがバブルされ、＃3の不一致のために破棄されることになります。もちろん、そうでない他の要素でトリガーされる可能性もliあります。を対象としています）。あなたの場合、#p1.ulページが存在し、すべてが存在するまで、は破棄されませんliその子孫になるため、＃1の候補になります。実行時にも生成される場合ulは、要素ツリーの上位にある要素を選択する必要がある場合がありますbody。これは最後の手段として選択できます。＃3は、実際にイベントを処理する要素のセレクターになります。この選択は一般的に明白ですが、＃3ではなく＃1に簡単に適用できます。

のクリックイベントに直接バインドするliと、既存の要素にのみバインドliされ、このバインディングステートメントの実行後に生成された要素にはバインドされません。

$.onの詳細と動的要素へのバインドの例

于 2012-09-09T12:53:13.127 に答える