← Back to Upcase

Problem assigning click function to a tag


(Jon Seidel) #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?


(Manish Valechha) #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?


(Jon Seidel) #3

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