Consider below snippets
$("#atc-button").bind("click.hctpAttach", function (e) {
console.log("Add to cart button clicked.")
});
<script src=".1.1/jquery.min.js"></script>
<button id="atc-button">Button</button>
Consider below snippets
$("#atc-button").bind("click.hctpAttach", function (e) {
console.log("Add to cart button clicked.")
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="atc-button">Button</button>
When atc-button
is clicked , why above listener fires? Shouldn't it fire only when we manually trigger click.hctpAttach
event?
- 1 When you give an event a namespace, is like my parents giving me my name. Instead of being a generic person, I am now person.NAMEHERE. But I am still a person – Huangism Commented Aug 16, 2018 at 13:25
3 Answers
Reset to default 5The jQuery documentation for .bind
states that
If the eventType string contains a period (.) character, then the event is namespaced. The period character separates the event from its namespace. For example, in the call .bind( "click.name", handler ), the string click is the event type, and the string name is the namespace. Namespacing allows us to unbind or trigger some events of a type without affecting others. See the discussion of .unbind() for more information.
In your above code, you are binding the click
event to the #atc-button
button with hctpAttach
as the namespace because you separated the two strings with a period character.
You can use event.namespace
to get the namespace of the event when it is triggered. This property is only available when the event is triggered using jQuery's .trigger()
method; otherwise it is undefined.
You can use the event's namespace to unbind
or trigger
specific event handlers for an event, not all.
Note that you should now use the .on()
method instead of .bind()
.
As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged.
Example with .bind()
and .unbind()
(not remended):
$('p').bind('click', function(e){
alert("Normal click event handler");
});
$('p').bind('click.custom', function(e){
alert("Custom click event handler");
});
$('#unbind').click(function(e){
$('p').unbind('click.custom');
});
$('#bind').click(function(e){
$('p').unbind('click.custom');
$('p').bind('click.custom', function(e){
alert("Custom click event handler");
});
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Paragraph---Click here!</p>
<button id="unbind">Unbind click.custom </button>
<br/>
<button id="bind">Bind click.custom </button>
Example with .on()
and .off()
(remended):
$('p').on('click', function(e){
alert("Normal click event handler");
});
$('p').on('click.custom', function(e){
alert("Custom click event handler");
});
$('#unbind').click(function(e){
$('p').off('click.custom');
});
$('#bind').click(function(e){
$('p').off('click.custom');
$('p').on('click.custom', function(e){
alert("Custom click event handler");
});
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Paragraph---Click here!</p>
<button id="unbind">Unbind click.custom </button>
<br/>
<button id="bind">Bind click.custom </button>
From doc.
If the eventType string contains a period (.) character, then the event is namespaced.
"click.hctpAttach"
is not a custom event, but a namespaced native DOM events. So you basically attached native DOM click
event handler to the dom #atc-button
. It will be triggered by the browser and triggered manually both. This is useful only when you want to unbind handlers of a specific type of click
and trigger some events of a type without affecting others.
jQuery Doc :
As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs.
jQuery event.namespace Property
Definition and Usage
The event.namespace property returns the custom namespace when the event was triggered.
This property can be used by plugin authors to handle tasks differently depending on the namespace used.
Tip: Namespaces beginning with an underscore are reserved for jQuery.
Example
Add and remove a custom namespace:
$("p").on("custom.someNamespace", function(event) {
alert(event.namespace);
});
$("p").click(function(event) {
$(this).trigger("custom.someNamespace");
});
$("button").click(function() {
$("p").off("custom.someNamespace");
});
source