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。我在 jQuery click 事件中添加了以下代码，仅适用于最后添加的控件

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

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

加1次，加1次以上就正常了

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();
});