e.targetにカーソルのすぐ下の要素の情報が含まれていることは知っていますが、table> tr> td>ボタンが含まれているdivのクラス名を知りたい場合は、そのボタンをクリックします。そのtdの中に。私はこのイベントが泡立つことを知っています、そしてdivがその泡立つレベルに存在するかどうかを知る方法があるはずです。どんな助けでも。
シナリオ:ボタンがモーダルウィンドウ内にあります。内部のボタンをクリックしてモーダルウィンドウのクラス名を見つけるにはどうすればよいですか。
e.targetにカーソルのすぐ下の要素の情報が含まれていることは知っていますが、table> tr> td>ボタンが含まれているdivのクラス名を知りたい場合は、そのボタンをクリックします。そのtdの中に。私はこのイベントが泡立つことを知っています、そしてdivがその泡立つレベルに存在するかどうかを知る方法があるはずです。どんな助けでも。
シナリオ:ボタンがモーダルウィンドウ内にあります。内部のボタンをクリックしてモーダルウィンドウのクラス名を見つけるにはどうすればよいですか。
.closest()
DOMを最も近い一致までトラバースするために使用します。
var parentDiv = $(yourButton).closest('div');
またはボタンのclick
:
$(yourButton).click(function() {
var nearestParentDiv = $(this).closest('div');
// And read its class
console.log(nearestParentDiv.attr('class'));
});
もちろん、セレクター.closest()
はこれよりも具体的に受け入れることができるため、モーダルウィンドウ<div>
に既知のクラスがあるが、他のクラスを検査する必要がある場合は、より具体的なセレクターを使用する必要があります。
はい、あなたが言うように、イベントはあなたのdivにバブルアップするので、次のようにdivにイベントを処理させます.on()
。
$('#yourdiv').on('click',':button',function(e) {
alert( $(e.delegateTarget).attr('class') );//alerts the classes of #yourdiv
alert( $(this).attr('id'));//alerts the id of the clicked button (if have one)
});
更新:
イベントがアタッチされた元のdivへの参照の取得を修正しました。Eventオブジェクトのevent.delegateTargetを使用します。エラーを見つけてくれたCristopheとKevinB.に感謝します。
作業デモを見る
.parent()
idのような親div属性を取得するために使用できます:http: //jsbin.com/ololad/1/edit
$('button').click(function(){
console.log($(this).parent().attr('id'));
});