单击“事件”复选框将不会触发

click event on checkbox will not fire

本文关键字：复选框 事件 单击      更新时间：2023-09-26

标记如下:

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

如果我将事件更改为click或将其更改为…).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>

错误选择

您的选择器是错误的，您正在搜索具有clsEvent类的元素中的复选框

这些选择器是正确的选择你想要的;):

.clsEvent

input[type=checkbox].clsEvent

.ulEvent input[type=checkbox]

试图从Event Object访问.val()

而且e是Event Object，你的元素是$(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>

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

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

您试图在类。clsEvent中获得输入，因此没有找到任何东西，因为您的输入具有类clsEvent。

相关文章：