Common Mistakes

Learning objectives#

• Recognise common jQuery error messages
• Fix event-handler bugs (doubles, missing on new elements, wrong this)
• Fix state bugs (attr vs prop, data caching)
• Fix async bugs with AJAX results

Explanation#

“$ is not defined” → jQuery not loaded yet, or loaded after your script. “$(...).x is not a function” → plugin missing, or jQuery loaded twice.

A click fires twice → the handler was bound twice (inside another handler or after each AJAX load). Use .off() first or delegate once.

Buttons on new rows do nothing → handlers were bound directly before the rows existed. Delegate from the parent.

this is window/undefined → arrow function used as a handler. Use function () {} or e.currentTarget.

Checkbox state wrong → .attr("checked") instead of .prop("checked"). Data not updating → .data() caches values; change with .data(key, value) or read .attr("data-x").

Variable is undefined after $.ajax → the code ran before the response. Use .done() or await.

Code example: Five bugs, five fixes#

1<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
2<div style="font-family:sans-serif">
3  <label><input type="checkbox" id="agree"> I agree</label>
4  <ul id="list"><li><button class="hi">Hi</button></li></ul>
5</div>
6<script>
7  $(function () {
8    // Bug 1 fixed: bind once, removing any earlier handler with the same namespace
9    function bind() { $('#list').off('click.demo').on('click.demo', '.hi', () => console.log('clicked once')); }
10    bind(); bind();
11

12    // Bug 2 fixed: prop, not attr, for current checkbox state
13    $('#agree').prop('checked', true);
14    console.log('attr:', $('#agree').attr('checked'), '| prop:', $('#agree').prop('checked'));
15

16    // Bug 3 fixed: normal function so this is the element
17    $('#agree').on('change', function () { console.log('this is', this.id); });
18

19    // Bug 4 fixed: empty selection is still an object — check length
20    console.log('exists?', $('.nope').length > 0);
21

22    // Bug 5 fixed: use AJAX data inside the callback (simulated with a Deferred)
23    let result;
24    const fakeAjax = $.Deferred(d => setTimeout(() => d.resolve(42), 50)).promise();
25    console.log('right after call:', result);
26    fakeAjax.done(value => { result = value; console.log('in callback:', result); });
27

28    $('#list .hi').trigger('click');
29  });
30</script>

attr: undefined | prop: true
exists? false
right after call: undefined
clicked once
in callback: 42

Step-by-step explanation#

1. bind() is called twice, but .off("click.demo") removes the old handler first, so the click logs once.
2. Setting the checkbox with .prop changes the live state; the checked attribute stays undefined.
3. A normal function handler gets the element as this.
4. An empty selection has length 0 — the only reliable existence test.
5. The value only exists inside the callback; reading it right after the call gives undefined.

Real-world use case#

Common mistakes#

Best practices#

• Read the console error first
• Check load order in the Network tab
• Use .off() or delegation to avoid duplicate handlers
• Use jQuery Migrate when upgrading

Remember this#

Practice exercise#

1<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
2<script>
3  $(async function () {
4    const user = await $.getJSON('https://jsonplaceholder.typicode.com/users/1');
5    console.log(user.name);   // Leanne Graham
6  });
7</script>

Mini quiz#

Want more? Practise all jQuery MCQs · jQuery interview questions

Related topics#

My notes#

Saved in this browser.