Question

I am currently putting together some jQuery that will activate slideDown() when an element is clicked that is generated by js.

Here is my function:

$('.radiowrap').delegate("span[title='yes']", "click", function() { 
    $('.radiowrap').next('.secondq:first').slideDown('medium'); 
}); 

This works fine but only if I specify the element (as shown above) therefore activating every matching element. If I use $(this) like so:

$('.radiowrap').delegate("span[title='yes']", "click", function() { 
    $(this).next('.secondq:first').slideDown('medium'); 
}); 

The code doesn’t work… does anyone have a solution to this? Here is a snippet of my HTML:

<div class="option radio">
    <h2 class="block">Do you have a hot water tank?</h2>
    <div class="radiowrap">
        <div class="radiocont">
            <label>Yes</label>
            <input type="radio" class="styled" value="yes" name="watertank" />
        </div>
        <div class="radiocont">
            <label>No</label>
            <input type="radio" class="styled" value="no" name="watertank" />
        </div>
    </div>
    <div class="secondq" style="display:none;">
        <h2>What type of water tank is it?</h2>
        <div class="radiowrap">
            <div class="radiocont">
                <label>Steel</label>
                <input type="radio" class="styled" value="steel" name="watertanktype" />
            </div>
            <div class="radiocont">
                <label>Fibreglass</label>
                <input type="radio" class="styled" value="Fibreglass" name="watertanktype" />
            </div>
        </div>
        <h2 align="left">How much insulation does it have?</h2>
        <input type="text" align="right" name="bonus" class="value" disabled="disabled"  />
        <div class="slidewrap">
            <div class="sliderMm slider"></div>
        </div>
    </div>
</div>

Answer 1

Use $(this).closest(".radiowrap") instead.

.delegate() and .live() try to emulate .bind() as close as possible; thus, inside the event handler, this points to the .radiowrap span[title='yes'] that was clicked, just as if you had bound to that <span /> directly.

Using .closest(".radiowrap") will find the ancestor .radiowrap of the clicked <span />, from whence you can proceed as before.