Jquery On And Off

hi, i dont know whether it is appropriate to post here, but… i need your help!

i get a string from back-end php via ajax, and write it in a div:




$.ajax ({

...

  success: $('.container').html(str);

...



the ‘str’ above like:




<span class='tag'>a</span>

<span class='tag'>b</span>



so, after the success of the ajax, i can get:




<div class='container'>

  <span class='tag'>a</span>

  <span class='tag'>b</span>

</div>



i also bind a handler to the click event on the span:




$('.container').on({

click: function(){


$(this).addClass('label'); // this works well


//////// here is the problem !!!!

//////// $(this).off(....) -- this is wrong

//////// $('.container').off('click', $(this)) -- also wrong

//////// how to use 'off' to unbind the 'click' event <img src='http://www.yiiframework.com/forum/public/style_emoticons/default/huh.gif' class='bbc_emoticon' alt='???' />?


...


},

...


}, '.tag');



so, as you see above. how can i unbind this ‘click’ event, please?

The simplest way is to use ‘one’ instead of ‘on’, so the event will fire only once.

Hi thanks for your reply.

in ‘container’ are 2 ‘span’, so if i use ‘one’ instead of ‘on’, the ‘click’ event will be unbinded from both the spans, but what i want to do is to unbind ‘click’ event only from the ‘span’ clicked.

What about this?




<div class='container'>

  <span class='tag clickable'>a</span>

  <span class='tag clickable'>b</span>

</div>






$('.container').on('click', '.clickable', function() {

  $(this).addClass('label');

  $(this).removeClass('clickable');

});



No need to call jQuery.off() …