JavaScript/jQuery で作成したリストビューがあります。リストアイテムをクリックすると、コードを実行する必要があります。
シナリオ 1: 次のコードを使用します。
$("div#home ul#one li").live('click', function() { console.log('click') });
このコードはクリックを取得しますが、2 回取得します。リスト項目をクリックすると、2 つの console.logs が出力されます。
シナリオ 2: 通常の index.html ファイルで作成された別のリストのコードがあります。
$("div#home ul#two li").off('click').on('click', function() { console.log('click') });
このコードは、コードを 2 回実行しません。
とにかく、JavaScript で作成されたリストビューでシナリオ 2 を動作させることはできますか? (その他のご提案も大歓迎です)
要素を動的に作成している場合..委任されたフォームを使用する必要があります
$("div#home").on('click','li', function() { console.log('click') });
バインド時に存在する最も近い静的親にイベント ハンドラーをバインドする
が動的でない場合ulは、それを ul にバインドできます
$("div#home ul").on('click','li', function() { console.log('click') });
動的に追加された要素に対してシナリオ 2 を機能させるにはon、次のようにデリゲートを使用します。
$("#two").on('click', 'li', function() { console.log('click') });
で選択している場合はid一意である必要があるため、最初のセレクターを短くしました。
また、ネストされたli要素があるため、最初のシナリオでコンソールに 2 回ログが記録されると思いますか?
問題は、リスナーを適切な場所にバインドしていないことです。リスナーをliに追加するために、 ANYページのハンドラーでon宣言しています。pageiniton$("div#home").on('click','li', function() { console.log('click') });
したがって、ページに 1 つのリスナーをdiv#loginアタッチし、2 番目のページに冗長な 2 番目のリスナーをアタッチしdiv#homeます。クリックすると、li1 つのイベントが 2 つのリスナーに対して発生し、2 つのクリックが発生します。
あなたがすべきことは、あなたが$(document).on('pageinit', function()どのページにいるかをチェックする条件付きで on リスナー宣言をラップすることです:
if ($(this).attr(id') === 'home'){
$("div#home").on('click','li', function() { console.log('click') });
}
これが簡単な解決策です。実際にすべきことは、pageinitイベントを発生させたページに基づいてコードを分岐し、それに基づいて正しいコードを呼び出すことです。参照: jQM Apps の構造化に関する私のガイド。
その要点は、ページを説明するデータ属性を etc にアタッチし、div[data-role=page]ページごとに個別のコードを呼び出すことです。(この例のように ID を使用する代わりに、複数ページの jQM アプリでページの複数のインスタンスを簡単に作成できるため)
何らかの理由で関数を読み込めないように見えるため、jsFiddle を作成できません。私は自分のウェブサイトでスクリプトをオンラインにしました。
ログイン設定は機能しています。ログインをクリックするだけで、画面（ホーム）が表示されます。LI タグの 1 つをクリックしてコンソール ログを開くと、1 回ではなく 2 回のクリックが表示されます。
必要なコードがある場合は、以下にコメントしてください。
私が使用している現在のコード:
$("div#home").on('click','li', function() { console.log('click') });
custom.js ファイルにあります。