jQuery checkbox (under a ul > li) check event

Question

I have this code to handle checkbox check event:

<html>

<head>
  <style>
    #leftPane {
        width: 200px;
        height: 500px;
        border: 1px solid;
        float: left;
    }
    #rightPane {
        height: 500px;
        width: 600px;
        border: 1px solid;
        border-left: 0px;
        float: left;
    }
    #addTo {
        border: 1px solid;
    }
    #addTo input {
        border: none;
    }
    #showList ul{
        list-style: none;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
        $('#todoItem').keypress(function(e){        
            if (e.which ==13) {
                var item = $('#todoItem').val();
                var chkbox = "<input type='checkbox' name='"+item+"'>"
                $("#showList ul").append("<li>"+chkbox+""+item+"</li>");
            }
        })
        $("#showList li ul input[type=checkbox]").change(function(){
            var $this = $(this);
            alert("tell me");
            /*if ($this.is(':checked')) {
                $(this).parent().remove();
            }*/
        }) 
    })
  </script>
</head>

<body>
  <div id="leftPane">
    <ul>
      <li>Shopping List</li>
      <li>Movie List`</li>
      <ul>
  </div>
  <div id="rightPane">
    <p>Let's add some todo</p>
    <div id="addTo">
      <input id="todoItem" type="text" placeholder="Add a todo"></input>
    </div>
    <div id="showList">
      <ul>
      </ul>
    </div>
  </div>
</body>

When I am clicking the checkbox the event handler

( $("#showList li ul input[type=checkbox]").change(function(){ )

is not fired (no alert appears). If I select

$('#showList > ul").click (...)

Then the event handler fires but that means clicking anywhere within the ul not necessarily for a checkbox.

I was following these links to develop the above code:

jQuery checkbox checked state changed event Use JQuery to check a checkbox in a parent list-item?

The jsfiddle page: https://jsfiddle.net/

Any help would be much appreciated.

Thanks

The one that worked: $('#showlist ul li').on('change', 'input[type=checkbox]', function(event) { var $this = $(this); $this.parent().remove(); }); — user1539343, May 01 '16 at 02:52

Shiva · Accepted Answer · 2016-05-01T00:57:56.200

my solution

$(document).on('change', "#showList ul li input[type=checkbox]", function(){
        var $this = $(this);
        alert("tell me");
        /*if ($this.is(':checked')) {
            $(this).parent().remove();
        }*/
    })

Problems in your solution:

you have written li before ul; you are expecting li to enclose ul tag, which is not the case rather opposite
You are dynamically adding checkbox in runtime, so normal event handler wont work like .change. You need to implement event delegation technique to work in your case.
in this code $('#showList > ul").click (...) you know what is your mistake

The majority of browser events bubble, or propagate, from the deepest, innermost element (the event target) in the document. Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. document object is guranteed to be present all the time. So, document object will delegate the change event to element matching the selector #showList ul li input[type=checkbox].

score 0 · Answer 2 · edited May 01 '16 at 01:00

When you register the onChange event, you do it for the matching elements currently in the page. New elements will not have that event listener registered to them.

To solve the problem, you could either add the event when creating the item itself, or you could use event delegation.

Taking advantage of events bubbling up the DOM and event delegation, register the event on a static parent (i.e #showlist), like so:

$('#showlist').on('change', 'input[type=checkbox]', function(event) {
    // your handler here
});

What'll happen is that when you click on the desired element, the event will bubble up until it reaches an element that has a registered handler for its type. You'll notice that event.target is the actual event target, not the element handling the event.

Aside from that, your selector should be #showlist ul li input[type='checkbox'], not #showlist li ul input[type='checkbox'].

Your idea almost worked. I had to modify a little bit for child selector. — user1539343, May 01 '16 at 02:51

score 0 · Answer 3 · answered May 01 '16 at 01:05

0

Let's follow KISS method.

<script>
    $(document).ready(function () {
        $('#todoItem').change(function () {
            $('<li />').append(
                $('<input type="checkbox" name="' + this.value + '" id="' + this.value + '">')
                .click(function () {
                    var $this = this;
                    alert('tell me ' + $this.name);
                })//click
                )//append
                .append('<label for="' + this.value + '">' + this.value + '</label>')
            .appendTo($("#showList ul"));
        });
    });
</script>

Is it what you want?

answered May 01 '16 at 01:05

Alex Kudryashev

9,120
3
27
36

Your idea is really good. However, some modifications needed as the click handler movies all the other lists like "shopping list" etc as well. – user1539343 May 01 '16 at 02:51
All these is up to you. For example, element.name and element.id should not contain spaces. This is your job to fix details. – Alex Kudryashev May 01 '16 at 03:36

jQuery checkbox (under a ul > li) check event

3 Answers3