Разные события для одного и того же элемента

[kpoxo6op]

Добрый день.

У меня есть неупроядоченный список ul в контейнере colleft. При щелчке на элемент li он меняет класс на selected, и под ним появляется div с кнопками внутри: "Переименовать", "Удалить" и т.п..
Мне нужно отвязать от щёлкнутого li появление div-а и смену класса по нажатию кнопки "Переименовать" и привязать другое событие.

Общий смысл такой: нажал на элемент - появилось меню управления им. После щелчка на определённый пункт меню повторное нажатие на выбранный элемент вызывает уже другое действие с этим элементом - удаление, переименование, в зависимости от нажатой кнопки меню.

[walik]

.bind(), .unbind() ?

[kpoxo6op]

.bind(), .unbind() ?

Я догадывался, что надо что-то делать с ними. Можно где-нибудь пример посмотреть, где у одного элемента сначала одно, а потом другое событие, после нажатия кнопки типа "Переключить"?

[kpoxo6op]

$(document).ready(function () {

   //функция показывания дива
   function showDiv() {
   
      $(this).addClass("selected").after("<div class=\"test\">многочисленные кнопки и формы</div>");
      
   }
   
   //функция показывания дива showDiv привязывается ко всем элементам colleft li

   $(".colleft li").live("click", showDiv);

   //кнопка unbind - отвязать событие показывания дива, убрать стиль selected, задать стиль edit   
   
   $("#unbind").click(function () {
   
      $("li.selected").die("click", showDiv).removeClass("selected").addClass("edit");
   
    });

});

почему не работает?

[kpoxo6op]

$(document).ready(function () {

   //функция показывания дива
   function showDiv() {
   
      $(this).addClass("selected").after("<div class=\"test\">многочисленные кнопки и формы</div>");
      
   }
   
   //функция показывания дива showDiv привязывается ко всем элементам colleft li

   $(".colleft li").bind("click", showDiv);

   //кнопка unbind - отвязать событие показывания дива, убрать стиль selected, задать стиль edit   
   
   $("#unbind").click(function () {
   
      $("li.selected").unbind("click", showDiv).removeClass("selected").addClass("edit");
   
    });

});

то же самое с bind и unbind работает. В чём секрет?

[nikita.mmf]

$(function(){

$(".colleft").delegate("li", "click", function(){
  var $listItem = $(this);
  if ( $listItem.hasClass("edit") ) {
  } else if ( $listItem.hasClass("selected") ) {
    $listItem.removeClass("selected").addClass("edit");
  } else {
    $listItem.addClass("selected");
  }
})

});

[kobezzza]

Возьмите за правило, что в 90% лучше делегирование событий, чем прямое привязывание)