Как предотвратить загрузку Bootstrap Modal при нажатии элемента внутри триггера?

Question

Я установил все строки таблицы, чтобы открыть загрузочный модальный.
Однако внутри каждой строки у меня есть поле выбора с несколькими статусами, которые пользователь должен иметь возможность выбрать.
Как я могу предотвратить открытие модальности при нажатии кнопки выбора?

Вот мой код:

HTML

<div class="row"> 
    <div class="col-md-6"> 
     <table class="table"> 
      <tr> 
       <th>Name</th> 
       <th>Status</th> 
      </tr> 
      <tr class="user-row" data-toggle="modal" data-target="#myModal"> 
       <td>John Doe</td> 
       <td> 
        <select class="form-control status-selection"> 
         <option></option> 
         <option>Active</option> 
         <option>Inactive</option> 
        </select> 
       </td> 
      </tr> 
      <tr class="user-row" data-toggle="modal" data-target="#myModal"> 
       <td>Jane Doe</td> 
       <td> 
        <select class="form-control status-selection"> 
         <option></option> 
         <option>Active</option> 
         <option>Inactive</option> 
        </select> 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
       ... 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div> 

Jsfiddle ссылка: https://jsfiddle.net/2c21mzfm/

Спасибо заранее.

Answer 1

См this скрипку:

$(".user-row select").on("click", function (e) { 
    e.stopPropagation(); 
}); 

Идея заключается в том, что вы остановить событие щелчка (e - первый аргумент на обратного вызова, который делегированное параметр в случае) пузырящейся до .user-row с stopPropagation

Answer 2

Вы устанавливаете всю строку таблицы, чтобы активировать модальную. Установите только td, чтобы активировать модальный.

HTML

<tr class="user-row"> 
    <td data-toggle="modal" data-target="#myModal">John Doe</td> 
    <td> 
    <select class="form-control status-selection"> 
     <option></option> 
     <option>Active</option> 
     <option>Inactive</option> 
    </select> 
    </td> 
</tr>