Events, effects and attributes
The single on/off API, delegated handlers that survive re-rendering, the animation shortcuts and their queues, and the attribute helpers.
Binding and unbinding
// direct binding
$('#save').on('click', function (event) {
event.preventDefault();
console.log($(this).attr('id'), event.target);
});
// delegated binding: one listener on a stable parent
$('#list').on('click', '.remove', function () {
$(this).closest('li').remove();
});
// namespaced + one-shot + triggered
$('#panel').on('mouseenter.jqApp', handler);
$('#panel').off('mouseenter.jqApp'); // removes only this one
$('#tip').one('click', handler); // fires at most once
$('#save').trigger('click'); // runs handlers, not the browser default| Method | Purpose |
|---|---|
on(events, selector, data, handler) | The one binding API since 1.7; the selector argument makes it delegated |
off(events, selector, handler) | Removes matching bindings; omitting the handler removes them all |
one() | Binds a handler that unbinds itself after firing |
trigger() / triggerHandler() | Runs handlers programmatically; the second skips the default action |
.jqApp namespace | Lets you cancel one binding without touching the others |
Delegation is the important one. A handler bound to a row disappears with that row, but a handler bound to the list keeps working for rows created later — exactly what a filter or pagination view needs.
Show, hide and animate
$('#panel').hide(); // instant
$('#panel').slideDown(200); // duration in ms
$('#panel').fadeTo(300, 0.5); // fade to a given opacity
$('#panel').toggle('fast'); // 'slow' | 'fast' | ms
$('#panel').animate({ opacity: 1, marginTop: '12px' }, 400, 'swing', function () {
console.log('finished');
});
$('#panel').stop(true, true); // clear queue, jump to the end state| Method | Effect | Default duration |
|---|---|---|
show / hide / toggle | Display and dimensions together | 400 ms |
fadeIn / fadeOut / fadeToggle | Opacity only | 400 ms |
slideUp / slideDown / slideToggle | Height only | 400 ms |
animate(props, duration, easing, done) | Any numeric CSS property | 400 ms |
stop(clearQueue, jumpToEnd) | Halt the running animation | immediate |
// jQuery animations are queued per element: two rapid clicks queue two runs
$('#panel').stop(true, true).slideToggle(200);
// prefers-reduced-motion aware (jQuery has no built-in helper)
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
$('#panel').stop(true, true)[reduce ? 'show' : 'slideDown'](200);Attributes, classes and values
$('input#email').val(); // reads the current value
$('input#email').val('[email protected]'); // writes it
$('#agree').prop('checked', true); // boolean property - use prop
$('#link').attr('href', '/next'); // attribute - use attr
$('#link').removeAttr('target');
$('.card').addClass('on').removeClass('off').toggleClass('wide', isWide);
$('.card').hasClass('on'); // boolean, no set returned
$('#card').data('userId'); // reads data-user-id, camelCased| API | Reads | Writes |
|---|---|---|
attr / removeAttr | The HTML attribute as written | The attribute, and the reflected property |
prop | The live DOM property | Only the property — correct for checked, disabled, selected |
val | Value of the first form control | Every matched control |
text / html | Combined text or markup | html parses markup: never pass user input |
data | Cached data-* values | Cache only; it does not write attributes |
css | Computed value | Inline style — prefer classes |
⚠️
html() is the direct equivalent of innerHTML, so it is an XSS sink. Use text() for anything a user can influence, and prefer class toggles over css() so styling stays in the stylesheet.FAQ
Why did my delegated handler stop working?
The parent you bound to was replaced by a re-render. Bind to an ancestor that is never swapped out —
document as a last resort — or use .off() before re-binding to prevent duplicates.Should I animate with jQuery or CSS?
CSS transitions handle most hover, expand and fade cases with better performance because they run off the main thread. Reach for
animate() when you need to animate a value that is not a CSS property, or to sequence several steps.Related
Selectors and traversal AJAX helpers and why modern code moves on
Last refreshed 2026-09-18.