Javascript jQuery-即使在单击列表时也会触发，但不会触发嵌入其中的复选框
我正在制作一个简单的网络应用程序。在一部分中，我动态创建了一个列表： 然后我有一个事件，当单击列表中的任何元素时触发：Javascript jQuery-即使在单击列表时也会触发，但不会触发嵌入其中的复选框,javascript,jquery,html,checkbox,Javascript,Jquery,Html,Checkbox,我正在制作一个简单的网络应用程序。在一部分中，我动态创建了一个列表： 然后我有一个事件，当单击列表中的任何元素时触发： $(document).on('click', '.list:not(.checkbox)', function() { console.log("list exectues"); }); 然后，当复选框中有任何更改时，会触发另一个事件： $(document).on('change','.checkbox',function(e){ consol
$(document).on('click', '.list:not(.checkbox)', function() {
console.log("list exectues");
});
$(document).on('change','.checkbox',function(e){
console.log("another execution!");
});
<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>
未来
-
二,
6.
7.
8.
9
10
11
12
13
14
15
16
十七,
18
19
20
21
22
23
24
25
26
27
28
29
30
31
-
一,
6.
7.
8.
9
10
11
12
13
14
15
16
十七,
18
19
20
21
22
23
24
25
26
27
28
29
30
31
e.stopPropagation（）由于您使用的是更改事件，因此可能必须排除li的click事件中的输入目标 试试看
使用on函数无法停止事件的传播。试试绑定吧
$('.checkbox').bind('click', function(e){
e.stopPropagation();
});
只需将此代码段添加到您的代码中。在我看来，您的目标选择器是错误的：
$(document).on('click', '.list :not(.checkbox)', function () {
console.log("list exectues");
});
不适合我。这已经是我在问题中给出的一个链接中的答案。你能提供与HTML相关的标记（.list）吗？！和
$('.checkbox').bind('click', function(e){
e.stopPropagation();
});
$(document).on('click', '.list :not(.checkbox)', function () {
console.log("list exectues");
});