動的要素がクリックされていないイベントをクリックして

Question

framework7に動的要素のclickイベントを追加するにはどうすればよいですか？

私が最初に私の見解で私の要素を追加する場合、クリックイベントが以下のように正常に動作します：

<div class="test">Click Me</div> 

$$('.test').on('click', function() { 
    myApp.alert("Gotcha!"); 
}); 

しかし、私は、特に動的な要素、動的virtual-listに追加された要素を持っている場合、私はにclickイベントを作成することはできません作業。これを行う正しい方法は何ですか？

私はインライン関数も試しました。例：<div class="test" onclick="myFunction();">Click Me</div>でも、これは動作しません。

Answer 1

あなたは使用することができます。

// Live/delegated event handler 
$$(document).on('click', 'a', function (e) { 
    console.log('link clicked'); 
}); 

をあなたのケースの場合：ここで

$$(document).on('click', '.test', function(e){ 
    console.log('Some code...'); 
}); 

はdocsです。 eventsセクションまでスクロールします。

Answer 2

新しい要素を動的に追加する機能では、新しい要素をイベントハンドラに割り当てる必要があります。すべての答えはと行ってもいいです

$$(document).on('click', '.test', function() { 
    myApp.alert("Gotcha!"); 
}); 

Answer 3

のような関数の何かを持っているとしましょう。しかし、このクラスの 'test'をページの他の要素に使用していると、（同じクラスの他の要素をクリックすると）いくつかのクリックイベントが発生します。ですから、それを防ぐには、その特定の要素にリスナーを追加する必要があります。要素が作成される前に、そのため、クリックイベントが」doesnのあなたは、クリックイベントを呼び出しているよう

あなたはID testIdの既存の要素にクラスtestの要素を追加している場合は、

$('#testId').on('click', '.test', function(this){ 

    } 

Answer 4

：

あなたはdinamically追加要素のためにこれを使用して、この

function addNewLines(){ 
    //add the new lines here 
    // you have to run this again 
    $$('.test').on('click', function() { 
    myApp.alert("Gotcha!"); 
    }); 
}