复选框上的click事件不会触发

Question

Here's the markup:

 $('.clsEvent input[type=checkbox]').change(function(e) { debugger; var title = $(e).val(); }); This is the function that builds the list and is called in the document ready function: function popServiceUserEvents(e) { $.ajax({ type: "POST", url: "@Url.Action("GetServiceUserEvents")/" + e, success: function(data) { if (data.events.length > 0) { for (var i = 0; i < data.events.length; i++) { $(".ulEvent") .append("<li> <input class='clsEvent' type='checkbox' value='" + data.events[i].Value + "'/> &nbsp;" + data.events[i].Text + "</li>"); } } }, error: function (jqXHR, textStatus, errorThrown) { alert(errorThrown); } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="multiEvent"> <ul class="ulEvent" style="display: block;"> <li> <input class="clsEvent" type="checkbox" value="3"> &nbsp;Event 1</li> <li> <input class="clsEvent" type="checkbox" value="4"> &nbsp;Event 2</li> </ul> </div> 

it doesn't matter if I change the event to click or change it to be in the form ...).on('change',function(... or if I just attempt the event against the class name without the type.

The page before I build the list is defined with this markup:

<div class="row eventDrop">
    <div class="col-md-6">
        <dl class="myDropdown">
            <dt>
                <a href="#" style="color: #fff; font-weight: normal;">
                    <span class="topSection">Event</span>
                    <p class="multiSel"></p>
                </a>
            </dt>
            <dd>
                <div class="multiEvent">
                    <ul class="ulEvent"></ul>
                </div>
            </dd>

        </dl>
    </div>

Answer 1

Wrong Selector

Your selector is wrong, you are searching a checkbox inside an element with clsEvent class

Those selectors are right choose the one you want ;):

.clsEvent

input[type=checkbox].clsEvent

.ulEvent input[type=checkbox]

Trying to access .val() from Event Object

Moreover e is an Event Object , your element is $(e.target)

 $('input[type=checkbox].clsEvent').change(function(e) { var title = $(e.target).val(); console.log(title); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="multiEvent"> <ul class="ulEvent" style="display: block;"> <li> <input class="clsEvent" type="checkbox" value="3"> &nbsp;Event 1</li> <li> <input class="clsEvent" type="checkbox" value="4"> &nbsp;Event 2</li> </ul> </div> 

Answer 2

It's because your selector is wrong.

Try below :

 $('input[type=checkbox].clsEvent').change(function(e) {
    debugger;
    var title = $(e).val();

});

You are trying to get the input inside the class .clsEvent and therefore not finding anything as your inputs have the class clsEvent.