获取单击复选框的 id 的方法不起作用

Question

当单击 Admin 下的任何子树复选框时，没有任何方法可以在我的 js 工作中检索和显示单击元素的 id。 所有尝试都返回未定义。 那么获取 id 需要什么？

            <div class="tree" style="border: currentColor; border-image: none; height: 1200px; -ms-overflow-y: hidden;">
                <ul class="nav nav-list" style="border: currentColor; border-image: none;">
                    <li>
                        <span class="accordion-heading" aria-expanded="false" data-toggle="collapse" data-target="#MMenu_DTID1">
                            <span class="checkbox MMTree-checkbox styled red"><input name="SM_IsPermitted1" class="MMTree-checkbox styled red" id="SM_IsPermitted1" style="display: none;" type="checkbox" value="false" iid="1"></span>
                            <input name="MM_IsPermitted1" type="hidden" value="false">
                            Admin
                        </span>
                        <ul class="nav nav-list collapse" id="MMenu_DTID1" style="padding-left: 20px;">
                            <li>
                                <span class="accordion-heading" aria-expanded="false" data-toggle="collapse" data-target="#S_menu1">
                                    <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted1" class="subtree-checkbox styled red" id="SM_IsPermitted1" style="display: none;" type="checkbox" value="false" iid="1"></span>
                                    <input name="SM_IsPermitted1" type="hidden" value="false">
                                    Users
                                </span>
                                <ul class="nav nav-list collapse" id="S_menu1" style="padding-left: 60px;">
                                    <li>
                                        <span class="accordion-heading" data-toggle="collapse" data-target="#S_menu11">
                                            <span class="checkbox subtree-checkbox styled red">
                                              <input name="SM_IsPermitted11"  class="subtree-checkbox styled red" 
                                                     id="SM_IsPermitted11" style="display: none;" type="checkbox" value="false" iid="2">
                                            </span>
                                            <input name="SM_IsPermitted11" type="hidden" value="false">                                                 
                                             testGetID
                                        </span>
                                    </li>
                                </ul>

                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

$(function ()
{
	$(".subtree-checkbox").click(function (e)
	{
   	    var idx = $(this).attr('id');
	    var idxx = $(this).prop('id');
	    alert("e.target.id = " + e.target.id);
            alert("id = " + idx);
	    alert("idxx = " + idxx);
     });
});

Answer 1

您将事件挂钩到 span，而不是复选框。钩住复选框，然后使用this.id 获取id：

$(".subtree-checkbox input[type=checkbox]").click(function (e) {
    var id = this.id;
    // ...
});

或者如果您需要挂钩跨度，请使用find 找到复选框：

$(".subtree-checkbox").click(function (e) {
    var id = $(this).find("input[type=checkbox]").attr("id");
    // ...
});

或者（少一点 jQuery）querySelector:

$(".subtree-checkbox").click(function (e) {
    var id = this.querySelector("input[type=checkbox]").id;
    // ...
});