ich hab gerade einwenig probiert.
wenn du dem div eine klasse oder ud gibst klappt es wie folgt:
Code:
<html>
<head>
<script src="/javascript/jquery/jquery-1.7.2.js"></script>
<script>
$('#bla').click(function() {
$('body').append('<div style="border: solid 1px red;">Überall solls verschwinden, aber nich bei dem Div</div>');
});
$(document).on('click', 'div:not(.noclick)', function(evt) {
//$(evt.srcElement).remove();
alert(evt.srcElement.id);
});
function test() {
$('body').append('<div style=\"border: solid 1px red;\" class="noclick">Überall solls verschwinden, aber nich bei dem Div</div>');
}
</script>
</head>
<body>
<button id="bla" onclick="test()">bla</button>
<div id='blabla' style="width: 200px; height: 200px; border: 2px solid red"></div>
<div id='blabla2' style="width: 200px; height: 200px; border: 2px solid green"></div>
</body>
</html>
das problem ist halt das man irgendwie nicht aus einem selector der ALLE elemente wählt, per not ein bestimmtes element wieder entfernen kann, nur wenn man es auf ein bestimmten typ zwingt!
Anscheinend ist die on methode nicht für soetwas geeignet, was ich mich nun frage ist folgendes:
Erstens könnte man bevor das Element ins DOM eingehängt wird auf alle Elemente ein Clickhandler machen, so hast du quasi alle Ausgewählt außer dem dialog.
zweitens: wenn der not selector nicht will, dann teste halt in dem clickhandler ob der gerade angeklickte element der dialog ist oder nicht.
der wird ja eine id haben, dann halt im handler prüfen ob die ID = der dialog id ist, wenn nicht dann blende ihn aus.
drittens:
du könntest auch auf den kompletten body einen click handler legen, der entfernt wird, sobald die maus den dialog betritt und wieder eingefügt wird wenn die maus den dialog verlässt,
bzw. einen flag setzen wie mouse_in_dialog und wenn der true ist, reagiert der click handler eben nicht
P.S.
man muss bei dem not selector keine ' und keine " angeben, aber er wird stets auf eine selection angewendet.
leider klappt auch body:not(.noclick) nicht, absolut keine Ahnung wieso.
Da du die elemente ja aber selber erstelltst, kannst du doch in diese funktione deine eigene version der on methode implementieren, da du ja immer weißt wann er erzeugt wird, kannst du da auch die handler verwalten
P.P.S.
mittlerweile glaube ich nicht das es an der o methode liegt.
Sondern an der art wie und wo die handler eingehängt werden, je nach selector wird der handler bei einem klick bis zu 4 mal ausgeführt, immer der selbe.
Das element was im :not steht aber einmal weniger. Sehr komisch!
Code:
<html>
<head>
<script src="/javascript/jquery/jquery-1.7.2.js"></script>
<script>
$('#bla').click(function() {
$('body').append('<div style="border: solid 1px red;">Überall solls verschwinden, aber nich bei dem Div</div>');
});
$(document).on('click', ':not(#noclick)', function(evt) {
//$(evt.srcElement).remove();
alert(evt.srcElement.id);
});
function test() {
$('body').append('<div style=\"border: solid 1px red;\" id="noclick">Überall solls verschwinden, aber nich bei dem Div</div>');
}
</script>
</head>
<body>
<button id="bla" onclick="test()">bla</button>
<div id='blabla' style="width: 200px; height: 200px; border: 2px solid red"></div>
<div id='blabla2' style="width: 200px; height: 200px; border: 2px solid green"></div>
</body>
</html>
Bei jedem element wird 3 mal die ID ausgegeben, außer wenn man auf das neu erstellte div klick, da nur 2 mal.
Meine Vermutung:
Weil man nur DIVs oder aber eine bestimtme ID ausschließt feuert der click handler 2 mal mehr weil er noch einen click auch body und document registriert, o.ä.
Edit: nimmt man den body auch in den :not befehl ist schonmal ein aufruf weniger!
Code:
$(document).on('click', ':not(#noclick, body)', function(evt) {
//$(evt.srcElement).remove();
alert(evt.srcElement.id);
});
edit2:
nimmst html auch noch mit rein passts!
Code:
$(document).on('click', ':not(#noclick, body, html)', function(evt) {
//$(evt.srcElement).remove();
alert(evt.srcElement.id);
});
#noclick kannst durch das ersetzen was du haben willst, auch nur div
feuert IMMER es sei denn man click auf das neu erstellte div
