jquerysのe.stopPropagation（）が必要な機能を取得できません。

Question

photoContainer以下の子があります。これは問題なく動作しますが、子をクリックするとコードが実行され、blackLayerが非表示になり、photoContainerが削除されます。これを防ぐにはどうすればいいですか？photoContainerの子供のどこかをクリックするとどうしたら実行できますか？

ありがとうございました。

$('div#photoContainer').live('click', function (e) { 
    e.stopPropagation(); 
    var blackLayer = $('div#blackLayer'); 
    if (blackLayer.length) { 
     blackLayer.fadeOut(); 
    } 
    $(this).remove(); 
}); 

Answer 1

私はあなたはそれがまで伝播しないよう#photoContainer要素の子要素にイベントの伝播を停止したい、問題はあなたが親要素にイベントの伝播を停止していることであると信じて#phoeoContainer要素：それは#photoContainer要素の子divにトリガされたとき

$('#photoContainer').live('click', function (e) { 
    var blackLayer = $('div#blackLayer'); 
    if (blackLayer.length) { 
     blackLayer.fadeOut(); 
    } 
    $(this).remove(); 
}); 
$('#photoContainer > div').live('click', function (event) { 
    event.stopPropagation(); 
}); 

これは、クリックイベントの伝播を停止します。ここで

はデモです：http://jsfiddle.net/J9dBS/2/

私は.live()はjQueryの1.7のようdeprecidatedされていることに注意したいと思います（あなたは何の警告が表示されていないことを「子」要素をクリックした場合のことに注意してください）。あなたはjQueryの1.7以降を使用している場合、このような.on()使用することを示唆しています：

$(<root-element>).on(<event>, <selector>, <event-handler>) 

それとも、jQueryの1.6.4にjQueryの1.4.2を使用している場合に、あなたが.delegate()を使用することを示唆しています：

$(<root-element>).delegate(<selector>, <event>, <event-handler>);