Question

I am trying to activate a slideDown() onclick with an element that has been generated by js.

I downloaded a script from ryanfait.com which allows you to customise the look of radio buttons. This works fine but when I try and apply an action to the generated element (in this case a span) it doesn’t work. How can I work around this?

Here is my HTML:

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

When the DOM loads the inputs are replaced by spans that look like this:
<span class="radio" title="yes" style="background-position: 0pt 0pt;"></span>

When you click on one of the spans I want to activate slideDown(). Here is my js:$('[title="yes"]').click(function() {
$(this).nextAll('.secondq:first').slideDown('slow');
});

Can anyone assist?

Answer 1

Use .live or .delegate to “Attach a handler to the event for all elements which match the current selector, now and in the future.”

// .live()
$('[title="yes"]').live("click", function() { 
    $(this).nextAll('.secondq:first').slideDown('slow'); 
});

// .delegate() (not entirely sure of your structure, the below may need
// to be modified accordingly
$('.radiocont').delegate("span[title='yes']", "click", function() { 
    $(this).nextAll('.secondq:first').slideDown('slow'); 
});