Problem assigning click function to a tag

Javascript
1

I want to have a link (a tag) do something different when I click it (as in a modal popup). I create the link as follows:

<a class='basic' href='basic-modal-content' id='basic-modal'>Terms of Service</a>

The content is here:

<div id='basic-modal-content'>
            <h3>Terms of Endearment</h3>
            Believe it
          </div>

and the jquery call to set the click function is:

(function ($) {
	$('#basic-modal').click(function () {
		$('#basic-modal-content').modal();
		return false;
	});
})(jQuery);

The page loads with no errors, but clicking the “Terms of Service” link just goes to the top of the page. Querying the link shows that the basic link behavior is still active:

$('#basic-modal').click;
function ( data, fn ) {
  return arguments.length > 0 ?
    this.on( name, null, data, fn ) :
    this.trigger( name );
}

I’ve eliminated all unnecessary javascript files to isolate my problem and I’ve also tried event.preventDefault() in the initializer. And I know the initializer is being called because I’ve added an alert() at the top.

What am I missing here?

2

@JESii I think you are missing the ‘#’ in the link.

<a class='basic' href='#basic-modal-content' id='basic-modal'>Terms of Service</a>

Are you using Bootstrap 3’s modal component?

3

Thanks, @manishval, but that didn’t solve the problem. Not Bootstrap; just another jquery modal plugin so far.