user1539343 user1539343 - 7 months ago 154
Javascript Question

jQuery checkbox (under a ul > li) check event

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

Answer

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