0

クリックするとリンクがあり、その中に別のリンクがあるdivが作成されます新しいリンクを無効にしたいpreventDefaultなどの多くの解決策を試し、falseを返しましたが、機能しませんでした。例はhttp://jsfiddle.net/2RSJj/1です。 /：

$(document).ready(function(){
$("a[title='go']").click(function(e){
    $(".cities").append("<div class='city'><a href='http://www.google.com' class='mylink'>google</aiv>"); 
    e.preventDefault();
});

$(".cities .city a").click(function(e){
    e.preventDefault();
    alert($(this).attr("class"));
});

});

メインhtml：

<a href="#" title="go">go</a><p>
<div class="cities">

</div>
4

1 に答える 1

2

リンクは動的に追加されるため、このリンクのデフォルトのアクションを防ぐために、on()メソッドを使用する必要があります（jQuery> = 1.7、jQuery <1.7を使用する必要があります）。delegate()

$('.cities').on('click', 'a.mylink', function(e){
    e.preventDefault();
});

JSフィドルデモ。

あなたが抱えていた問題は、イベントバインディングが発生したときにリンクが存在しないため、メソッドがイベントを関連する要素にclick()バインドしないことです。を使用すると、は親/祖先要素（イベントバインディングのポイントに存在する）にアタッチされ、セレクターに一致する要素（として渡される）で発生するそのイベント（最初の引数の文字列）をリッスンします。 2番目の引数）。clickaon()click'click'

イベントとセレクターの両方が一致すると仮定すると（a.mylink要素はclick-ed）、関数が実行されます。この場合、デフォルトのアクションが実行されるのを防ぐだけです。ただし、委任されたイベントでは、イベントがバインドされている祖先要素に伝播/バブルされるまでにイベントが既に発生しているため、単純にイベントを発生させることはできないことに注意してください。return false

また、2つの要素間の要素に明示的に実装するイベントハンドラーがある場合return false、イベントの委任はその要素を超えて進行しません（clickハンドラーを持つ要素に伝播/バブルし、return false（の組み合わせで応答するため）event.stopPropagation()およびevent.preventDefault()）。

たとえば、次のコードでは、html：を使用しています。

<a href="#" title="go">go</a><p>
<div class="cities">
    <div class="demo">
    </div>
</div>

この場合、on()メソッドは要素にアタッチされたまま.citiesですが、要素にはクリックハンドラーがあり、ご想像のとおり、次.demoの値を返します。false

$("a[title='go']").click(function(e){
    $(".demo").append("<div class='city'><a href='http://www.google.com' class='mylink'>google</a></div>"); 
    e.preventDefault();
});

$('.cities').on('click', 'a.mylink', function(e){
    e.preventDefault();
    // using an alert because a simple 'e.preventDefault()` wouldn't
    // be visibly different to the 'return false'
    alert(e.type + ' event reached the ".cities" element!');
});

$('.demo').click(function(e){
    return false;
});

JSフィドルデモ。

a.mylink上記では、要素をクリックしてもアラートは発生しませんが、 click-handlerがclickイベントをインターセプト（および否定）しないと、alert() が発生します。

$("a[title='go']").click(function(e){
    $(".demo").append("<div class='city'><a href='http://www.google.com' class='mylink'>google</a></div>"); 
    e.preventDefault();
});

$('.cities').on('click', 'a.mylink', function(e){
    e.preventDefault();
    alert(e.type + ' event reached the ".cities" element!');
});

JSフィドルデモ。

したがって、委任を使用するときは、要素にバインドされているイベントに注意してください。開始するとき、それはトリッキー（っぽい）かもしれません。

参照：

于 2013-01-26T21:59:25.367 に答える