Question

I am using JQuery to show a green check-mark and message on a successful submission. The image and message show up correctly. However I then want to slowly remove the image and message using JQuery’s hide function. I have used this before with no problem when the html was on the page already. This time it is not working and I’m wondering if it is since the HTML is being added with JQuery and then removed. I’m also not sure if the element is a child of another element or not, which may be the problem. Any insight into the issue would be a huge help, thanks.

JQuery Code:

$("<span id='checkmark'><img height='45' width='45' src='./img/checkmark_green.jpg'/>&nbsp;<span style='color: #33CC33; font-size: 14pt'>Word successfully added to the dictionary.</span><br/></br></span>").prependTo("#div_dict");

//i also tried '#div_dict > #checkmark'             
$('#checkmark').click(function(){
    $(this).hide('slow');
});

HTML/PHP:

echo('<div id="div_dict">');
        echo('<big id="add"><b>Add a word or phrase to the dictionaries</b></big><br/>');
        echo('<form id="form_dict" name="form_dict">');
        echo('<input id="entry" name="entry" size="30"/><br/>');
        echo('<input type="radio" id="sent" name="sent" value="Positive"/>positive&nbsp;&nbsp;<input type="radio" id="sent" name="sent" value="negative"/>Negative<br/><br/>');
        echo('<input id="but_dict" type="button" value="Submit" onclick="addToDict();"/>');
        echo('</form>');
        echo('</div>');

Answer 1

Your code works for me if you want to click the text to remove it. You can remove the click function to hide it on it’s own if that is what you’re after.

$("<span id='checkmark'><img height='45' width='45' src='./img/checkmark_green.jpg'/>&nbsp;<span style='color: #33CC33; font-size: 14pt'>Word successfully added to the dictionary.</span><br/></br></span>").prependTo("#div_dict");

$('#checkmark').delay(2000).hide('slow');