what is the most common mistake that you make while writing code in jquery ?

Question

Mine is that, I almost always forget to put a # before the id name of the element

Example:

$("ElementId") instead of $("#ElementId")

Whats yours?

Answer 1

Not really a jQuery issue as much as a JavaScript issue: Leaving extra commas when using object notation after removing the last property:

var point = {
    x: 0,
    y: 0,
    // z: 0
}

Answer 2

Calling $(this) inside an ajax success.

Answer 3

Forgetting semicolons at the end of curly brackets

var point = {
    x: 0,
    y: 0,
    // z: 0
} // <= semicolon goes here

var foo = function(){
  return 'foo!';
} // <= semicolon goes here

Plugin authors, don't forget!

(function($){
  // plugin code
})(jQuery); // <= look ma! semicolon!

This is pretty common, too

$("#foo")
  .find('a')
    .click(function(){
      // yay!
    })
  .end()
  // more chaining...
  .slideDown() // <= semicolon goes here

Forgetting the semicolon after the last statement in a function:

var foo = function(){
  linesOfCode();
  responsibleSemicolons();
  alert("happy") // <= semicolon goes here even though it works without one!
} // <= and here!

Note

This is not specific to jQuery, but applies to Javascript. Modern browsers are usually smart enough to get past this now. Javascript minifiers will typically correct this for you, too.

Answer 4

Not the most common mistake I made, well I did it a couple of times then I learned the hard way. But this has got to be the most common mistake committed in jQuery of all time. There is at least one daily question on SO regarding this.

Cross-domain requests (with an XHR status of 0).

Answer 5

I always mix up append(), prepend(), and after() for some reason. I think visit the "Manipulation" section of docs.jquery.com more than any other section because of this. After reading the docs it's always painfully obvious which one I should be using, but it never sticks.

Answer 6

Because it's so easy to write $("#someid"), I often don't store the result in a variable if I need it again later - I just do $("#someid") again. Not really a mistake though.

Answer 7

Setting .attr('checked', true) on a node that isn't added to the DOM and expecting it to work on Internet Explorer. I ended up writing this workaround function:

jQuery.fn.setChecked = function(checked) {
    var that = this;

    if (checked !== undefined)
        checked = !!checked;
    else
        checked = true;

    /* Needed so attr('checked') will return true before
       the .ready callback is called. */
    that.attr('checked', checked);

    /* Needed so IE6 will actually check the checkbox
       in some cases. */
    that.ready(function(){
        that.attr('checked', checked);
    });
}

Either this is a bug report, or it is my mistake to manipulate a DOM node before it's ready. Nevertheless, it's worth posting anyway :-)

Answer 8

Writing

$(#notAVariable)

instead of

$('#notAVariable')

or

$("#notAVariable")

Answer 9

I often write a whole lot of c# then come to javascript and write a for loop like this:

for (int i = 0;i < blah.length;i++)

grr

Answer 10

The biggest mistake I use is using $('#test') instead of jQuery('#test'). This causes a lot of conflicts with a lot of other javascript toolkits as $ is commonly used in them also.

If you want to use $ rather than writing jQuery all over the place, you can wrap your code in a function call, like so (note: this technique is ):

(function($){
    // $ can now be used for jQuery
})(jQuery);

Beware not to use $ for other JavaScript toolkits, as $ is set to jQuery inside the function. This works by creating a function, then calling it with jQuery (thus binding jQuery to $). Because of lexical scoping, the $ definition here won't interfere with the outside scope.

Answer 11

.before() and .after()

$("div").before("#someOtherDiv") 

actually moves #someOtherDiv from the DOM to before the new div. I always think "div" will be moved before #someOtherDiv.

Same goes for after().

Answer 12

I'm usually typing too quickly, and end up with some gibberish like

#$("id")

or

$#("id")

or

$(#"id")

More a general JavaScript issue than jQuery. After writing a bunch of perl, I'll write:

for(my i = 0; i < max; i++)

Only to get yelled at about using my by the error console.

Answer 13

Whenever I use the two-argument toggleClass method, which adds or removes a class based on whether the second argument is true or false, I have to remind myself that if the second argument isn't really and truly a boolean value, then the method will behave as if it were called with just one argument, removing the class if it is present, and adding it if it's absent.

var obj = { };
var p = $("<p/>").toggleClass("hidden", obj.foo);

Now p does have a class="hidden" attribute, even though obj.foo is false in a boolean context. This leads to having to use defensive cruft like

var p = $("<p/>").toggleClass("hidden", !!obj.foo);