html - jquery click triggering on unbound element not clicked -

html

<b class="ke">some text <b class="x">x</b></b> 

javascript

function key_tag_click() {     $('.ke').not('.x').unbind().bind('click', function () {         console.log('.ke');         $(this).unbind();         $(this).children('.x').show();         x_click();     });     return; }  function x_click() {     $('.x').unbind().bind('click', function () {         console.log('.x');         $(this).unbind();         $(this).hide();         key_tag_click();     });     return; }  key_tag_click(); 

1. first click on .ke

the console logs

ke

1. then click .x

the console logs

x

ke

why?? triggering .ke click event? @ point .key unbinded!

when click on element, event first triggered on element, elements parent, elements parent, etc way document. why clicking on .x results in click handler .ke getting triggered. prevent it, either return false, stop propagation, or ensure click element event target.

option one:

$('.x').unbind("click").bind('click', function (e) {     e.stoppropagation(); 

option two:

$('.ke').unbind().bind('click', function (e) {     if (this !== e.target) return;     console.log('.ke'); 

option three:

$('.x').unbind("click").bind('click', function () {     ... code ...     return false; });