jquery - 如何为所有 div 设置单个事件

Question

<div id=ControlId>
    <span>Select Option</span> 
</div>
</div>

<div id=ControlId + "_child"  style="display: none" > 
    <table>
        <tr>
            <td valign="top" style="width: 165px" ><input type="checkbox" name="vehicle" value="Bike" /> option 1</td>
        </tr>
        <tr>
            <td valign="top" style="width: 165px" ><input type="checkbox" name="vehicle" value="Car" /> option 2</td>
        </tr>
        <tr>
            <td valign="top" style="width: 165px" ><input type="checkbox" name="vehicle" value="dog" /> option 3</td>
        </tr>
    </table>
</div>

我div在我的页面中添加了不止一次。我动态改变ControlId。我在 jQueryclick事件中添加了以下代码，仅适用于最后添加的控件

$("#" + ControlId).click(function () {
    $("#" + ControlId + "_child").fadeIn("slow");
    $("#" + ControlId + "_child").toggle();
});

如何获取仅适用于最后添加的控件的所有 ControlId 的单击事件的事件？

如果添加一次，多次正常工作意味着有问题

Answer 1

如果主 div 是以下的父级，请尝试此操作"#" + ControlId + "_child"：

$('div[id$="_child"]').parent().on('click', function(){
    var child = $(this).find('div[id$="_child"]').last();
    child.fadeIn("slow");
    child.toggle();
});

但是，我强烈建议您不要使用当前的方法。试试这个：

 <div id=ControlId class="control-main">
 <span>Select Option</span> 

 <div id=ControlId + "_child"  class="control-child" style="display: none" > 
 // your other html here
 </div>

JS：

$(document).on('click', '.control-main', function(){
    $('.control-child').last().fadeIn("slow").toggle();
});