jQuery - fire even on click on list but not on checkboxes embedded in them

Question

I am making a simple web app. In one part, I have dynamically created a list:

enter image description here

And then I have an event which fires when any element of the list is clicked:

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

    });

And then another event which fires up when there is any change in the checkboxes:

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

        });

The problem is that whenever the '.checkbox' event fires, '.list' fires too - because the checkbox is literally inside the list. I want to stop this. What should I do?

I have tried the various techniques presented in:

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.

but nothing worked - some of them had no effect, while some other left the list un-clickable. What should I do?

The HTML Markup of the list is:

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

could you provide HTML relevant markup (.list)?! And a jsfiddle would be great too — A. Wolff, Jan 04 '14 at 14:52
Your HTML markup is not valid, DIV cannot be direct child of UL — A. Wolff, Jan 04 '14 at 15:01

Rajaprabhu Aravindasamy · Accepted Answer · 2014-01-04T15:08:41.150

1

e.stopPropagation() is made for overcoming this kind of situations.

Try,

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

DEMO

Since you are using the change event, you probably have to exclude the input targets in the li's click event.

Try,

$('li').click(function (e) {
    if (!$(e.target).is('.checkbox')) {
        alert('li');
    }
});

$('.checkbox').change(function (e) {
    alert('check');
});

DEMO

edited Jan 04 '14 at 15:08

answered Jan 04 '14 at 14:48

Rajaprabhu Aravindasamy

66,513
17
101
130

Doesn't works for me. This was already an answer in one of the links I have given in the question. – coder Jan 04 '14 at 14:50

score 1 · Answer 2 · answered Jan 04 '14 at 14:57

1

As i see it, your target selector was wrong:

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

answered Jan 04 '14 at 14:57

A. Wolff

74,033
9
94
155

Now there is still an issue, HTML markup is not valid, DIV as direct child of UL – A. Wolff Jan 04 '14 at 14:59

Armel Larcier · Answer 3 · 2014-01-04T14:57:36.130

0

Using the on function makes it impossible to stop the event's propagation. Try bind instead!

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

this should make it so the list elements don't dispatch click events coming from checkboxes.

Just add this snippet to your code.

edited Jan 04 '14 at 14:57

answered Jan 04 '14 at 14:52

Armel Larcier

15,747
7
68
89

jQuery - fire even on click on list but not on checkboxes embedded in them

3 Answers3

DEMO

DEMO

Linked

Related