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

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

Еще пара вариантов:

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

Answer 3

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

<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; 
     }