jquery селектор для контейнера и всех дочерних элементов, кроме указанных

Question

У меня есть веб-форма, которая состоит из поля поиска и таблицы, которая заполняется в результате поиска. Что у меня происходит, так это то, что если вы щелкаете в любом месте таблицы, ваш фокус снова возвращается к полю поиска, чтобы обеспечить быстрое взаимодействие.

Я хочу предотвратить такое поведение для некоторых элементов, таких как выбранные элементы, содержащиеся в таблице. Я хотел бы сделать это, добавив класс, чтобы позже я мог изменить то, что игнорирует изменение фокуса.

Я думаю, проблема в том, что мой селектор ищет элемент с классом boxx и без класса noboxx, но дочерние элементы не имеют самого класса boxx, но я не могу создать селектор мне нужен.

$('.boxx > *:not(.noboxx)').on('click', function (e) {
    $('#searchtext').focus().select();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='row'>
  <div class='col-md-2'>
    <input type='text' id='searchtext' />
  </div>
  <div class='col-md-10 boxx'>
    <table>
      <tr>
        <td>Important text</td>
        <td><button type="button">clicker</button></td>
        <td>
          <select class='noboxx'><option>1</option><option>2</option></select>               </td>
      </tr>
    </table>
  </div>
</div>

Answer 1

Я думаю, это связано с распространением событий. Попробуйте вместо этого. Мне кажется, что это именно то, что вы ищете.

$('#theOuter').on('click', '.boxx .noboxx', function (e) {
    e.stopPropagation();
});
$('#theOuter').on('click', '.boxx *:not(.noboxx)', function (e) {
    e.stopPropagation();
    $('#searchtext').focus().select();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='row'>
    <div class='col-md-2'>
        <input type='text' id='searchtext' />
    </div>
    <div id="theOuter">
        <div class='col-md-10 boxx'>
            <table id="theTable">
            <tr>
                <td>Important text</td>
                <td><button type="button">clicker</button></td>
                <td>
                    <select class='noboxx'>
                        <option>1</option>
                        <option>2</option>
                    </select>
                </td>
                <td class="noboxx" style="border: 1px solid red; cursor: pointer">
                    stuff
                </td>
                <td style="border: 1px solid blue; cursor: pointer">
                    more stuff
                </td>
            </tr>
            </table>
        </div>
    </div>
</div>