CODEWITHSUNDEEP
jqueryhtml
Ragavan
Ragavan

Reputation: 3034

How to set individual event for all div

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

I have added this div more than one time in my page. I dynamically change ControlId. I have added following code in jQuery click event only applied for last added control 

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

How to get event for all ControlId's click event only applied for last added control?

If added one time , working fine more than one time means got problem

Upvotes: 2

Views: 140

Answers (1)

Joe
Joe

Reputation: 15528

Try this if the main div is the parent of "#" + ControlId + "_child":

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

However, I strongly advise against your current approach. Try this instead:

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

Upvotes: 2

Related Questions