understanding jQuery event.namespace better

Question

Consider below snippets

$("#atc-button").bind("click.hctpAttach", function (e) {
        console.log("Add to cart button clicked.")
});

<script src="https://ajax.googleapis.com/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?

Answer 1

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 recommended):

$('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.com/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() (recommended):

$('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.com/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>