Seleccionar el body excepto un div

doylelives · #1 (**permalink**) 07/09/2010, 14:57

Holas:
Estoy trantando de usar el selector not para mostrar un mensaje al clickear en el body, excepto cuando clickeo en un div con id="div1"

Código PHP:

  $('#idBody').not($('#div1')).click(function(){

alert('Mi mensaje');

}

Pero no logro que funcione =(
Version jquery 1.4.2

gracias!

tredio · #2 (**permalink**) 07/09/2010, 15:46

prueba con esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo target</title>
<style>
body{ height:500px;}
#no_selecciona{ border:solid 1px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('body').click(function(ev){
        var target = $(ev.target);
        if(target.not('#no_selecciona').length){
            alert('click body')
        }
    });
});
</script>
</head>
 
<body>
<div id="no_selecciona">hola</div>
</body>
</html>

doylelives · #3 (**permalink**) 07/09/2010, 19:27

Oye, funciona!!!!
que no lo puedo creer!
mira que habia intentado con muchas alternativas del selector not, no habia encontrado nada parecido a esto.

gracias!!!!!!!

doylelives · #4 (**permalink**) 08/09/2010, 06:23

me surgio otro problema, resulta que dentro del elemento en cuestión tengo otros elementos que también deben abarcar el "not", como el caso del div "no_selecciona2"

Código PHP:

  <div id="no_selecciona" style="background-color:green;">Div a omitir

    <div id="no_selecciona2" style="background-color:cyan";>div interno</div>

</div>

El not se está aplicando al div no_selecciona, pero no actua en el elemento "no_selecciona2"
porque??

tredio · #5 (**permalink**) 08/09/2010, 10:55

por que ya viene siendo otro elemento, si ves en la condicion que puse solo pregunto por el id, i no_selecciona no es igual a no_selecciona2 y lanza el alert, otra opcion que se me ocurre es que en vez de ponerlo como id lo pones como una clase algo asi:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo target</title>
<style>
body{ height:500px;}
#no_selecciona{ border:solid 1px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('body').click(function(ev){
        var target = $(ev.target);
        if(target.not('.no_seleccionable').length){
            alert('click body')
        }
    });
});
</script>
</head>
 
<body>
<div id="no_selecciona" class="no_seleccionable">hola
    <div class="no_seleccionable"> otro div</div>
</div>
</body>
</html>

Dany_s · #6 (**permalink**) 09/09/2010, 08:58

Código HTML:

Ver original<head>
<title>Prueba</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    $( function (){
        $('body').click(function(ev){
            alert("click en body");
        });
 
        $('#no_selecciona').click( function (e){
            e.stopPropagation();
        });
    });
</script>
</head>
<body>
 
<div id="no_selecciona" style="background-color:green; padding:10px; width:200px">Div a omitir
    <div style="background-color:blue">div interno</div>
    <div style="background-color:yellow">div interno</div>
    <div style="background-color:red">div interno</div>
</div>
<br />
<div style="height:100px; width:100px; background-color:silver">acá si</div>
 
</body>
</html>

tredio · #7 (**permalink**) 14/09/2010, 20:48

esa si no la sabia dany jeje, buena respuesta