Question

I have the function:

<script type="text/javascript">
    $(function() {
        $('#subbutton').click(function() {
            $('#subbutton').hide();

        });
    });
</script>

It simply makes this button hide when clicked:

 <a id="subbutton" class="button" href="javascript:TINY.box.show({url: 'follow',width:600,height:170,openjs:'initPopupLogin',opacity:30})"><span>Button</span></a>

Now, if i try to use the identical function, but with a link later on the page, it doesnt work (i have erased the original button at this point) Here is the code:

<div id="subbutton">
        <a href="#"><span>Button</span></a>
</div>

I have tried putting the id in the anchor and in the span, nothing seems to be working for this link. Any idea why this isn’t working? (I have deleted the original button so that this second button is a unique id on the page)

Answer 1

Try using .on instead to attach your event handler. I am suspecting the button is not in the dom at the time you attach the event handler.

$(document).on('click', '#subbutton', function() {
    $(this).hide();
});

EDIT now that i understand the problem. You are better off giving the buttons a class and using a class selector.