子供をクリックするとjQueryが親トリガーを無効にする

Question

ウェブサイトには、クリック領域であるdivがあります。このゾーンをクリックするとモーダルが開き、ビデオURLをモーダルに入力する必要があります。 [OK]をクリックすると、ビデオがリストに追加されます。これはクリックゾーン内にもあります。

"白い"スペースのどこかをクリックすると、再びモーダルが開きます。しかし、画像をクリックする（またはリンクを削除する）と、モーダルを開くべきではありません。残念ながら、メインのdivのclickイベントは常にトリガされます。

私はこれをevent.stopPropagation()で解決しようとしましたが、私はそれを使用しているので、私はこの仕事を得ることができません。どうすればこれを達成できるでしょうか。

コードスニペットは、私がやっていることの単純化です。クリックゾーンをクリックして[追加]をクリックします。クリックゾーンに画像が追加されます。あなたはこれを続けることができます。しかし、画像をクリックするか削除するとモーダルが開かないはずです。削除をクリックすると、削除アクションがトリガーされます。あなたは、画像がクリックされたときにイベントを添付する必要が

var $videoModal = $('#videoModal'); 
 
var $videoSrc = $('#video-src'); 
 
var $videoSortable = $('#videoSortable'); 
 
var $videoModalOk = $('#videoModalOK'); 
 

 
$('.video-clickzone').click(function() { 
 
    $videoModal.modal('show'); 
 
}); 
 

 
$videoModalOk.click(function() { 
 
    $videoSortable.append("<li id='lyON3M9P3eU'><img src='http://img.youtube.com/vi/lyON3M9P3eU/0.jpg' width='200' data-video='https://www.youtube.com/embed/lyON3M9P3eU'><div class='text-center' data-video-delete='lyON3M9P3eU'>Delete</div></li>"); 
 
    $videoModal.modal('hide'); 
 
    $('.ck-message').hide(); 
 
}); 
 
$('[data-video-delete]').click(function(e) { 
 
    $('#' + $(this).data('video-delete')).remove(); 
 
});

.video-clickzone { 
 
    min-height: 150px; 
 
    border: 2px dashed #dddddd; 
 
    background: white; 
 
    padding: 20px 20px; 
 
} 
 
.video-clickzone:hover { 
 
    cursor: pointer; 
 
} 
 
.video-clickzone .ck-message { 
 
    text-align: center; 
 
    margin: 2em 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="video-clickzone"> 
 
    <div class="ck-message"> 
 
    <div> 
 
     <i class="fa fa-video-camera fa-5x"></i> 
 
    </div> 
 
    Click to add video 
 
    </div> 
 

 
    <ul id="videoSortable" class="list-unstyled list-inline"></ul> 
 

 
</div> 
 

 
<div class="modal bs-example-modal-md" id="videoModal" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog modal-md"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header bg-primary"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> 
 
     </button> 
 
     <h4 class="modal-title">Add video</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>This is just an example, click on 'Add'</p> 
 
     <div class="form-group" id="video-form"> 
 
      <label class="control-label" for="video-src">Video URL</label> 
 
      <input type="url" id="video-src" class="form-control"> 
 
     </div> 
 

 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
 
     <button type="button" class="btn btn-primary" id="videoModalOK" data-actie="">Add</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたは画像のHTMLを構築しているか、それは私の抜粋であるとして、あなたはjQueryの上を使用することができたとき、あなたはそれらを挿入することができます画像上のすべてのクリックをバインドします。基本的には、すべてのクリックをビデオ画像コンテナ内のliセレクタにアタッチし、そのイベントでイベントevent.stopPropagationを発生させてバブルイベントを防止し、クリックがdivに到達しないようにします。イメージまたはリンクをクリックしたときに同じイベントがトリガーされることに注意してください。そうすれば、DOM内に異なるセレクタ（イメージ用と削除リンク用）を作成して、簡単に削除できますイベント。

var $videoModal = $('#videoModal'); 
 
var $videoSrc = $('#video-src'); 
 
var $videoSortable = $('#videoSortable'); 
 
var $videoModalOk = $('#videoModalOK'); 
 

 
$('.video-clickzone').click(function() { 
 
    $videoModal.modal('show'); 
 
}); 
 

 
// This is the new function 
 
$('.video-clickzone').on("click", "li", function(evt){ 
 
    evt.stopPropagation(); 
 
    evt.preventDefault(); 
 
}) 
 
// end of new code 
 

 
$videoModalOk.click(function() { 
 
    $videoSortable.append("<li id='lyON3M9P3eU'><img src='http://img.youtube.com/vi/lyON3M9P3eU/0.jpg' width='200' data-video='https://www.youtube.com/embed/lyON3M9P3eU'><div class='text-center' data-video-delete='lyON3M9P3eU'>Delete</div></li>"); 
 
    $videoModal.modal('hide'); 
 
    $('.ck-message').hide(); 
 
}); 
 
$('[data-video-delete]').click(function(e) { 
 
    $('#' + $(this).data('video-delete')).remove(); 
 
});

.video-clickzone { 
 
    min-height: 150px; 
 
    border: 2px dashed #dddddd; 
 
    background: white; 
 
    padding: 20px 20px; 
 
} 
 
.video-clickzone:hover { 
 
    cursor: pointer; 
 
} 
 
.video-clickzone .ck-message { 
 
    text-align: center; 
 
    margin: 2em 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="video-clickzone"> 
 
    <div class="ck-message"> 
 
    <div> 
 
     <i class="fa fa-video-camera fa-5x"></i> 
 
    </div> 
 
    Click to add video 
 
    </div> 
 

 
    <ul id="videoSortable" class="list-unstyled list-inline"></ul> 
 

 
</div> 
 

 
<div class="modal bs-example-modal-md" id="videoModal" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog modal-md"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header bg-primary"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> 
 
     </button> 
 
     <h4 class="modal-title">Add video</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>This is just an example, click on 'Add'</p> 
 
     <div class="form-group" id="video-form"> 
 
      <label class="control-label" for="video-src">Video URL</label> 
 
      <input type="url" id="video-src" class="form-control"> 
 
     </div> 
 

 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
 
     <button type="button" class="btn btn-primary" id="videoModalOK" data-actie="">Add</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

あなたは、クリックイベントのターゲットは、ちょうどこのことにより、ご希望のオブジェクトや子供であるかどうかを確認することができます：とにかく

$('.video-clickzone').click(function(e) { 
    if(e.target != this) return; //.video-clickzone was not clicked directly 
    $videoModal.modal('show'); 
}); 

を、あなたもイベントを委任する必要があります違法に追加されたオブジェクトなので、コードは次のようになります

$(document).on('click', '.video-clickzone', (function(e) { 
    if(e.target != this) return; //.video-clickzone was not clicked directly 
    $videoModal.modal('show'); 
});