views:

51

answers:

2

I have some HTML setup like this:

<div>
    <label for="amount"><a id="amount-help-icon" class="help icon-link" href="#"><span class="ui-icon ui-icon-help"></span></a> Amount:</label>
    <input id="amount" class="inputText" type="text" value="" maxlength="100" size="10" name="amount" />
    <span class="help">The amount for stuff</span>
</div>

I am trying to have jquery display a dialog when the help icon is clicked, so I have this:

$("a.help").click(function () {
    $(this).closest("label").siblings(".help").dialog({ title: "Help" });
    return false;
});

It works fine to display the dialog the first time, but the span disappears from the DOM when I click the icon. So, if I click the icon again, nothing happens (because there is no span.help to find).

+1  A: 

You probably want to clone the span.

$(this).closest("label").siblings(".help").clone().dialog({ title: "Help" });
Samuel Cole
Definitely seems the simplest option!
scottm
It's probably going to add a new dialog somewhere each time, sje397's answer will probably be more performant.
Samuel Cole
+1  A: 

The following allows you to re-use the dialog multiple times - but the <span> will dissapear immediately instead of on the first click.

$("a.help").each(function(i, link) {
    var $this = $(this), 
        d = $this.closest("label").siblings(".help").dialog({ title: "Help", autoOpen: false });
    $this.data('dialog', d);
});

$("a.help").click(function () {
    $(this).data('dialog').dialog('open');
    return false;
});​

Demo here.

sje397
This opens every span.help on the page in a dialog when one icon is clicked.
scottm
@scottm: Ah yeah sorry. Edited.
sje397
Nope, since this converts the span to a dialog, the selector in the a.help click function doesn't find the span.help anymore. :(
scottm
@scottm: Edited, and tested this time.
sje397