我正在制作一个简单的网络应用程序。在一部分中，我动态创建了一个列表:
然后我有一个事件，当单击列表中的任何元素时会触发:
$(document).on('click', '.list:not(.checkbox)', function() {
console.log("list exectues");
});
然后，当复选框中有任何更改时，会触发另一个事件:
$(document).on('change','.checkbox',function(e){
console.log("another execution!");
});
问题是，每当 '.checkbox' 事件触发时，'.list' 也会触发 - 因为复选框实际上位于列表内。我想阻止这一切。我该怎么办？
我尝试了以下内容中介绍的各种技术:
jQuery Click Event On Div, Except Child Div
Assign jQuery click event to the everything in the body except a few divs and their children
jQuery: click function exclude children.
但没有任何效果 - 其中一些没有效果，而另一些则使列表无法点击。我该怎么办？
列表的 HTML 标记为:
<ul id="list" class="sortable ui-sortable">
<li id="future">Future</li>
<div>
<li class="list" id="g0">
<input type="checkbox" class="checkbox">2</li>
<div id="gc0" class="datepicker hasDatepicker" style="display: none;">
<div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="display: block;">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a><a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
<div class="ui-datepicker-title"><span class="ui-datepicker-month">January</span> <span class="ui-datepicker-year">2014</span>
</div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span>
</th>
<th><span title="Monday">Mo</span>
</th>
<th><span title="Tuesday">Tu</span>
</th>
<th><span title="Wednesday">We</span>
</th>
<th><span title="Thursday">Th</span>
</th>
<th><span title="Friday">Fr</span>
</th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" undefined" data-handler="selectDay" data-event="click" data-month="0" data-year="2014"><a class="ui-state-default" href="#">1</a>
</td>
<td class=" undefined" data-handler="selectDay" data-event="click" data-month="0" data-year="2014"><a class="ui-state-default" href="#">2</a>
</td>
<td class=" undefined" data-handler="selectDay" data-event="click" data-month="0" data-year="2014"><a class="ui-state-default" href="#">3</a>
</td>
<td class=" ui-datepicker-week-end undefined" data-handler="selectDay" data-event="click" data-month="0" data-year="2014"><a class="ui-state-default" href="#">4</a>
</td>
</tr>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-days-cell-over undefined ui-datepicker-current-day ui-datepicker-today" data-handler="selectDay" data-event="click" data-month="0" data-year="2014"><a class="ui-state-default ui-state-highlight ui-state-active ui-state-hover" href="#">5</a>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">6</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">7</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">8</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">9</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">10</span>
</td>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">11</span>
</td>
</tr>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">12</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">13</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">14</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">15</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">16</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">17</span>
</td>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">18</span>
</td>
</tr>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">19</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">20</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">21</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">22</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">23</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">24</span>
</td>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">25</span>
</td>
</tr>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">26</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">27</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">28</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">29</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">30</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">31</span>
</td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div>
<li class="list" id="g1">
<input type="checkbox" class="checkbox">1</li>
<div id="gc1" class="datepicker hasDatepicker" style="display: none;">
<div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="display: block;">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a><a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
<div class="ui-datepicker-title"><span class="ui-datepicker-month">January</span> <span class="ui-datepicker-year">2014</span>
</div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span>
</th>
<th><span title="Monday">Mo</span>
</th>
<th><span title="Tuesday">Tu</span>
</th>
<th><span title="Wednesday">We</span>
</th>
<th><span title="Thursday">Th</span>
</th>
<th><span title="Friday">Fr</span>
</th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" undefined" data-handler="selectDay" data-event="click" data-month="0" data-year="2014"><a class="ui-state-default" href="#">1</a>
</td>
<td class=" undefined" data-handler="selectDay" data-event="click" data-month="0" data-year="2014"><a class="ui-state-default" href="#">2</a>
</td>
<td class=" undefined" data-handler="selectDay" data-event="click" data-month="0" data-year="2014"><a class="ui-state-default" href="#">3</a>
</td>
<td class=" ui-datepicker-week-end undefined" data-handler="selectDay" data-event="click" data-month="0" data-year="2014"><a class="ui-state-default" href="#">4</a>
</td>
</tr>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-days-cell-over undefined ui-datepicker-current-day ui-datepicker-today" data-handler="selectDay" data-event="click" data-month="0" data-year="2014"><a class="ui-state-default ui-state-highlight ui-state-active ui-state-hover" href="#">5</a>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">6</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">7</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">8</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">9</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">10</span>
</td>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">11</span>
</td>
</tr>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">12</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">13</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">14</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">15</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">16</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">17</span>
</td>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">18</span>
</td>
</tr>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">19</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">20</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">21</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">22</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">23</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">24</span>
</td>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">25</span>
</td>
</tr>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">26</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">27</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">28</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">29</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">30</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled undefined"><span class="ui-state-default">31</span>
</td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</ul>
最佳答案
e.stopPropagation() 就是为了克服这种情况而设计的。
尝试，
$(document).on('change','.checkbox',function(e){
e.stopPropagation();
console.log("another execution!");
});
DEMO
<小时/>由于您正在使用更改事件，因此您可能必须排除 li 的点击事件中的输入目标。
尝试，
$('li').click(function (e) {
if (!$(e.target).is('.checkbox')) {
alert('li');
}
});
$('.checkbox').change(function (e) {
alert('check');
});
DEMO
关于javascript - jQuery - 即使单击列表也会触发，但不会触发嵌入其中的复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20922367/