.remove для родителя возникает и при клике на потомка. Как отключить?

[arachnoz]

Кодеры, приветствую вас и прошу помощи!
Добавляю элемент.

$("body").append('<div id="read"><div id="onread">' + msg + '</div></div>' );

Пытаюсь убрать. Так не работает.

$("#read").click(function() {
    $("#read").remove();
});

Работает так.

$("#read").live("click", function() {
    $("#read").remove();
}

Хрен бы сним, но .live убивает всё и при клике на внутренний блок #onread, то есть - передаётся родителю #read - а это не гуд.
Как сделать так, чтобы при клике на вложенный блок события click для родителя #read не возникало.

[arachnoz]

Камараден, ну хоть что-то скажите

Может что-то типа того (коряво, простите):

if ('#onread').onmouseover(function {ничего не делать} )
else $("#read").remove();

[Tek]

Вот так:
http://jsfiddle.net/7RZUC/27/

[arachnoz]

Ссылка не работает

Нагуглил теорию:

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

Это происходит потому, что событие всплывает.

Как не дать ему всплыть от потомка? Как-то так, но куда встраивать? В If $("#onread").click()?

$("p").click(function(event){
event.stopPropagation();
// do something
});

Всё, решил вопрос. Оказалось всё просто.

$("#onread").live("click", function(event){
event.stopPropagation();
}); 

$("#read").live("click", function() {
$("#read").remove();
});

Но тем не менее, хотелось бы понять, почему не работает OnClick (а точнее, .click в JQuery), а работает .live?
Из-за динамического добавления блоков в DOM?