-3

I am trying to add a class to a div that is clicked It doesn't seem to do anything? Here is my jquery

 $("#dropdown-nav").click(function () {

this.addClass('open');
    console.log('test');

});
6
  • 1
    always use your console...
    – A. Wolff
    Sep 28, 2013 at 13:45
  • EITHER this.className="open" OR when you use jQuery $(this).addClass("open")
    – mplungjan
    Sep 28, 2013 at 13:47
  • 2
    @mplungjan: The first will, of course, remove any other classes, if present... :-) Sep 28, 2013 at 13:48
  • still not working nothing on console im using jquery-1.10.2.js would this be a problem? Sep 28, 2013 at 13:53
  • @ConnorCushionMulhall Wait for document ready: $(function(){$("#dropdown-nav").click(function () { $(this).addClass('open'); console.log('test'); });}); If still not working, then you are adding element dynamically (use delegation) or you have multiple elements with same ID
    – A. Wolff
    Sep 28, 2013 at 14:05

5 Answers 5

6

You have one definite issue, flagged up by previous answers, and one potential issue (indicated by your comment to Abinash that doing what he suggests, which solves the first issue, doesn't make it work).

Issue A: addClass is a method of jQuery objects, not DOM elements, but within the click callback this refers to a DOM element. To wrap it in a jQuery object, use $(this) or jQuery(this) (in noConflict mode). See the previous answers.

Issue B: If that alone doesn't solve the problem, the most likely thing is that the dropdown-nav element doesn't exist yet when you're running your code hooking up your click handler. There are two ways to make sure it exists:

  1. Put your script tag containing the hookup code below the element in the HTML file. It's best, generally, to put your scripts at the very end, just before the closing </body> tag. Or,

  2. Use jQuery's ready callback.

If those don't solve it, other possible explanations are:

  • The element doesn't have the id you think it has (dropdown-nav)
  • Something else has hooked the click event and is stopping the event before your code sees it
  • (Reaching here) You forgot to load jQuery

Here's an example solving both problems, using solution #1 for Issue B:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <style>
    .open {
      color: blue;
    }
  </style>
</head>
<body>
  <div id="dropdown-nav">Drop-down nav</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
// Note that this is BELOW the element in the HTML, so the element exists
$("#dropdown-nav").click(function() {
    $(this).addClass("open");
});
</script>
</body>
</html>

Live Copy

2

You syntax for this is wrong. Instead of

this.addClass('open');

write

$(this).addClass('open');

or

jQuery(this).addClass('open');

Use $ sign or prefix jquery when you are working with jquery

0
0

When you are dealing with jquery ,this should be $(this)

 $("#dropdown-nav").click(function () {   
    $(this).addClass('open');
    console.log('test');    
});

Seems,you just started with Jquery.

Learn : http://learn.jquery.com/javascript-101/this-keyword/

0

You are missing $ try this

$(this).addClass('open');
0

'#dropdown-navsounds like a large element to me. Are you sure it's not something like#dropdown-nav .menu-item`? Anyway, all the suggestions above sound respectable and relevant. Here's one thing you may want to try:

$("#dropdown-nav").on('click',function (e) {
    alert('You actually clicked on ' + e.target);
    $(this).addClass('open');
    console.log('test');
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.