jQuery - запускается даже при нажатии на список, но не на встроенные в них флажки

0

Я делаю простое веб-приложение. В одной части я динамически создал список:

Изображение 174551

И тогда у меня есть событие, которое срабатывает при нажатии любого элемента списка:

$(document).on('click', '.list:not(.checkbox)', function() {
    console.log("list exectues");

    });

И затем другое событие, которое срабатывает, когда есть какие-либо изменения в флажках:

$(document).on('change','.checkbox',function(e){
    console.log("another execution!");

        });

Проблема в том, что всякий раз, когда происходит событие ".checkbox", также запускается ".list", потому что флажок находится буквально внутри списка. Я хочу остановить это. Что мне делать?

Я пробовал различные методы, представленные в:

jQuery Нажмите Событие на Div, кроме Child Div

Назначьте событие jQuery click для всего, что есть в теле, за исключением нескольких div и их детей

jQuery: функция click исключает детей.

но ничего не сработало - некоторые из них не имели никакого эффекта, в то время как некоторые другие оставили список un-clickable. Что мне делать?

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>&nbsp;<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">&nbsp;</td>
                            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</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">&nbsp;</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>&nbsp;<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">&nbsp;</td>
                            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
                            <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</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">&nbsp;</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</ul>
  • 1
    Не могли бы вы предоставить соответствующую HTML разметку (.list) ?! И jsfiddle тоже был бы хорош
  • 0
    Ваша HTML-разметка недействительна, DIV не может быть прямым потомком UL
Теги:
checkbox

3 ответа

1
Лучший ответ

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

Поделиться
  • 0
    Не работает для меня Это был уже ответ по одной из ссылок, которые я дал в этом вопросе.
  • 0
    @coder Попробуйте мое обновление!
1

Как я вижу, ваш целевой селектор был неправильным:

$(document).on('click', '.list :not(.checkbox)', function () {
     console.log("list exectues");
});
Поделиться
  • 0
    Привет! Хорошо поймал!
  • 0
    Теперь все еще есть проблема, HTML-разметка недействительна, DIV как прямой потомок UL
0

Использование функции on делает невозможным прекращение распространения события. Попробуйте привязать вместо этого!

$('.checkbox').bind('click', function(e){
    e.stopPropagation();
});

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

Просто добавьте этот фрагмент кода.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню