CODEWITHSUNDEEP
javascriptjquerydebugging
TIMEX
TIMEX

Reputation: 271674

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

<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>

Upvotes: 0

Views: 77

Answers (3)

ardsrk
ardsrk

Reputation: 2447

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>

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382666

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.

Upvotes: 0

Sampson
Sampson

Reputation: 268344

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.

Upvotes: 3

Related Questions