動的に作成されたアンカーでのデフォルトの回避方法

Question

id #tasksのタスクのリストがあります。削除アンカーのクラスは.deleteTaskの各リスト要素の横にあります。この要素とその削除リンクは、ajaxによって動的に作成されます。

$('#tasks').on('click', '.deleteTask', function (event) 
{ 
    if(! confirm('Are you sure?')) event.preventDefault(); 
}); 

をしかし、親#tasks要素をクリックする前にトリガされたクラス.deleteTaskとアンカーのclickイベントを思わ：私は要素にいくつかのハンドラをフックしたいのであれば、私はこのようにそれを使用しています。だから、私はpreventDefault（）を呼び出すことはできません。バブリングのせいだと思う。しかし、どうやって動的に作成されたアンカーに対してpreventDefault（）をトリガーできますか？ここで

は、あなたがあなたのロジックの前にevent.preventDefault（）を置く必要がある例https://jsfiddle.net/dyLa915b/1/

Answer 1

変更する必要があるものが3つあります。

第1回：同一ページ上のidsの番号に同じIDを使用していますが間違っています。 ID属性は、1つのDOM内で一意である必要があります。したがって、代わりにidクラスを使用する必要があります。そして、そのクラスをjQueryのセレクタとして使用する必要があります。

第2回：これらの要素は動的に作成されるため、DOMには初めてページがレンダリングされたときにDOMに認識されないため、 DOMは準備が整った後に作成されました。このような場合は、jQueryイベントの委譲を使用する必要があります。

第3回：jQuery関数の最初の行にpreventDefaultと書いてください。

だから、最終的に更新されたコードは次のようになります。

$(document).on('click', '.delete', function (event) 
{ 
    event.preventDefault(); 
    if(! confirm('Are you sure?')) { 
      // Write code if user clicks `ok` button of confirmbox. 
    } 
}); 

Answer 2

です。ここでは例です： -

var $links = $('.deleteTask'); 
 

 
$links.off('click').on('click', function($event){ 
 
    $event.preventDefault(); 
 
    $event.stopPropagation(); 
 
    
 
    if(! confirm('Are you sure?')){ 
 
    // do stuff 
 
    }; 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <li> 
 
    <a class="deleteTask" href="www.google.com">Google</a> 
 
    </li> 
 
    <li> 
 
    <a class="deleteTask" href="www.youtube.com">Youtube</a> 
 
    </li> 
 
</div>

Answer 3

あなたはそれを行うためdelegateを使用することができます。動的要素にはdelegateが使用されます。 this similar postを参照してください。