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>


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


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>


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




No need to call jQuery.off() …