jquery делегат нажимает на класс, но только если не нажимает на определенного дочернего элемента

Question

У меня есть этот делегат с jquery

$('body').delegate('.line-item','mouseup',function(){
        // more code gets run 
})

образец дом с этим классом

<div class="line-item">
  <div class="thumb">
    Image goes here
  </div>
  <div class="title">
    Title goes here
  </div>
  <div class="destroy">
    Destroy Button goes here
  </div>
</div>

Желание: когда пользователь щелкает где-либо внутри этого элемента div.line, который не является элементом div класса уничтожения, запускается некоторый код для отображения этой позиции, но если они нажимают на этот элемент div.destroy, эта позиция не будет отображается, но вместо этого уничтожается. Так что я не знаю, каким должен быть CSS-селектор, я знаю, что есть селектор: not, хотя мне не удается создать селектор с ним, который поможет,

есть мысли?

спасибо!

Answer 1

Просто сделай

$('div.line-item').delegate('div:not(".destroy")', 'mouseup', function() {
    ....
})

Проверьте рабочий пример на http://jsfiddle.net/trVKF/2/

Answer 2

Вам просто нужно добавить это к тому, что у вас уже есть.

$('body').delegate('.destroy','mouseup',function(e){
    $(this).hide();  // or whatever 
    e.stopPropagation();
});

Answer 3

Вот что я бы использовал:

// to select the thumb and title
$("div.line-item div:not(.destroy)").click(function(){code...});

// to select destroy
$("div.line-item div.destroy").click(function(){});

Документы на "не" селектор: http://api.jquery.com/not-selector/

Надеюсь, это поможет.