JQuery Вопрос выбора детей

Question

У меня есть следующий код:

$("#Table1 tbody").children().each(function(e){
$(this).bind('click', 
            function(){
                // Do something here
            }, 
            false) 
});

HTML-таблица Table1 имеет 2 столбца; один для Имен и один для <button> элемента.

Когда я нажимаю на строку таблицы, она отлично работает. Когда я нажимаю на кнопку, код кнопки срабатывает; однако код строки тоже.

Как я могу отфильтровать селектор, чтобы кнопка не вызывала событие нажатия родительского элемента?

Answer 1

Это то, что вы хотите.

Это stopPropogation , которое остановит родителей.

<table>
  <tr>
    <td>The TD: <input type="button" id="anotherThing" value="dothis"></td>
  </tr>
</table>

<div id="results">
  Results:
</div>

<script>

  $(function() {
    $('#anotherThing').click(function(event) {
       $('#results').append('button clicked<br>');
       event.stopPropagation();       
    });
    $('td').click(function() {
       $('#results').append('td clicked<br>');

    });
  });

</script>

Вот ссылка на пример того, как это работает:

http://jsbin.com/uyuwi

Вы можете повозиться с ним по адресу: http://jsbin.com/uyuwi/edit

Answer 2

Вы также можете сделать что-то вроде этого:

<table id="Table1">
        <tbody>
            <tr id="tr1">
                <td>
                    The TD: <input type="button" id="button1" value="dothis"/>
                </td>
            </tr>
            <tr id="tr2">
                <td>
                    The TD: <input type="button" id="Button2" value="dothis"/>
                </td>
            </tr>
        </tbody>
    </table>

поддерживающий JS

        $('#Table1 tr').bind('click', function(ev) { return rowClick($(this), ev); });  //Bind the tr click
        $('#Table1 input').bind('click', function(ev) { return buttonClick($(this), ev); })  //Bind the button clicks

        function rowClick(item, ev) {
            alert(item.attr('id'));
            return true;
        }

        function buttonClick(item, ev) {
            alert(item.attr('id'));
            ev.stopPropagation();

            return true;
        }

Answer 3

Можно ли удалить код кнопки и просто запустить код строки, поэтому вроде используется всплывающее окно события.

Другая пара вариантов:

• можете ли вы добавить класс к TD, в котором есть кнопка и селектор, выполните '[class!="className"]'
• может быть, попробуйте event.preventDefault(). Вы можете видеть, что здесь используется . таким образом, вы можете предотвратить действие по умолчанию, которое запускается при нажатии кнопки, хотя я не уверен, полностью ли это предотвратит всплытие.