Why isn't this working? It doesn't even call the onClick.

Question

<script type="text/javascript">
$("a.filef").click(function(e){
    alert('hi, it works');
    return false;
});

</script>


<a class="filef" href="" rel="1">A</a>
<a class="filef" href="" rel="2">V</a>

Answer 1

You need to make sure the elements exist first. Try this instead:

$(function(){
  $("a.filef").click(function(e){
    e.preventDefault();
    alert("Hi, it works.");
  });
});

Placing your code within:

$(function(){
  /* here */
});

Causes it to wait until the DOM is finished loading before it runs. In your case, it waits until the links exist before it attempts to bind logic to them.

In some scenarios you will need to run the code before the object exists. This is the case with many ajax-enabled websites. In those cases, jQuery has the $.live() method, which is of a similar look:

$(function(){
  $("a.filef").live("click", function(e){
    e.preventDefault();
    alert("Hi, it works.");
  });
});

Using this, it doesn't matter if the elements already exist, or will show up sometime in the future. Unless you're working with ajax or late-created elements, I would suggest sticking with the first solution.

Answer 2

Your same code is working for me, check out:

http://jsbin.com/axivo3

Put your js code at the bottom of the page or use jquery's ready event which is fired after DOM is available.

Answer 3

Wrap your script in a function and pass it as an argument to $(document).ready(function) or you could write the same as an anonymous function inline.

<script type="text/javascript">
$(document).ready(function(){
 $("a.filef").click(function(e){
    alert('hi, it works');
    return false;
 });
});
</script>