jQuery：监听点击href

Question

I have the following HTML code, which I am unable to change:

<div id="stepbystep" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-state-default ui-corner-top">
      <a href="#step-1">
        <span>Step 1</span>
      </a>
    </li>
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
      <a href="#step-2">
        <span>Step 2</span>
      </a>
    </li>
    <li class="ui-state-default ui-corner-top">
      <a href="#step-3">
        <span>Step 3</span>
      </a>
    </li>
</ul>
</div>

I would like to use JQuery to listen for a click on one of the hrefs and pop up the href's destination. This is the code I have so far, but I am getting the error TypeError: $(...) is null . I think the problem is with my selector $('div#stepbystep ul li a') .

var tabCheck = {
  ready : function() {
    $('div#stepbystep ul li a').click(
      function($e) {
        $e.preventDefault();
        window.open(this, 'FavoriteLink', '');
        alert(this.href)
      }
    );
  }
};

$(document).ready(tabCheck.ready);

Thanks for any help

Answer 1

The problem was because I was using Joomla, so had to use jQuery instead of $ as Rob Schmuecker guessed in his comment. I can't see a way to mark a comment as an answer, but thanks!

It still isn't working because the alert is not popping up, but I'll raise a different question for that.

Answer 2

try:

 $('#stepbystep ul li a')

you don't need the '$' on $e either...

and maybe add a jsfiddle page?