Question

这是标记：

$('.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>

如果我将事件更改为单击或将其更改为 ...）。on（'change'，function（... ），则无关紧要或者如果我只是在没有类型的情况下针对类名尝试事件。

构建列表之前的页面是使用此标记定义的：

<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

错误的选择

您的选择器错误，您正在使用clsEvent类

搜索元素内的复选框

这些选择器是正确的选择你想要的;）：

.clsEvent

input[type=checkbox].clsEvent

.ulEvent input[type=checkbox]

尝试从.val()

访问Event Object

此外e是Event Object，您的元素是$(e.target)

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这是因为你的选择器错了。

尝试以下：

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

});

您正在尝试在.clsEvent类中输入，因此没有找到任何内容，因为您的输入具有类clsEvent。

单击复选框上的事件不会触发

2 个答案: