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?

• javascript
• jquery
• events

• 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 3

The 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