2016-04-02 11 views
2

In dem Beispiel unten auf klicken div2 eine Nachricht nur für div2 anzeigen, nicht die Nachricht von div1 anzeigen? Dies erforderlich .... Wie kann dies tun ... Ich hoffe zu Holen Sie sich die Lösung ... Dankbar Im Beispiel unten auf klicken div2 eine Nachricht nur für div2 anzeigen, nicht die Nachricht von div1 anzeigen? Dies erforderlich .... Wie kann dies tun ... Ich hoffe, die Lösung zu bekommen. .. Dankbar Wie kann auf klicken div2 eine Nachricht anzeigen jquery

<!DOCTYPE html > 
 
<html> 
 
<head> 
 
    <script src="javas/jquery-1.12.2.min.js" type="text/javascript"></script> 
 
    <title>click on div2 jquery </title> 
 
    <script type="text/javascript"> 
 
     $('document').ready(function() { 
 
      $('#div1').click(function() { 
 
       alert("div1"); 
 
      }); 
 

 
      $('#div2').click(function() { 
 
       alert("div2"); 
 
      }); 
 
     }); 
 
    </script> 
 
    <style type="text/css"> 
 
     #div1 
 
     { 
 
      position: absolute; 
 
      height: 147px; 
 
      width: 336px; 
 
      right: 38%; 
 
      top: 49px; 
 
      border-radius: 10px; 
 
      border: medium solid #FF0000;    
 
     } 
 
     #div2 
 
     { 
 
      position: absolute; 
 
      height: 58px; 
 
      width: 175px; 
 
      right: 27%; 
 
      top: 42px; 
 
      border-radius: 10px; 
 
      border: medium solid #0000FF; 
 
      text-align: center; 
 
      font-weight: 700; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
\t <div id="div1"> 
 
     <div id="div2"> 
 
      click on div2 jquery 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

+0

umfassen die jQuery-Skript – guradio

+0

Mögliche Duplikat [JQuery - definiert $ nicht] (http://stackoverflow.com/questions/2194992/jquery-is-not-defined) – guradio

+0

ich denke, dass meine Antwort helfen Sie. füge stopPropagation() hinzu; Funktion. –

Antwort

0

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<!DOCTYPE html > 
 
<html> 
 
<head> 
 
    <script src="javas/jquery-1.12.2.min.js" type="text/javascript"></script> 
 
    <title>click on div2 jquery </title> 
 
    <script type="text/javascript"> 
 
     $('document').ready(function() { 
 

 

 

 

 
      $('#div1').click(function() { 
 
       alert("div1"); 
 

 

 

 
      }); 
 

 

 
      $('#div2').click(function (event) { 
 
       event.stopPropagation(); 
 
       alert("div2"); 
 

 

 

 
      }); 
 

 
     }); 
 
    </script> 
 
    <style type="text/css"> 
 

 

 
     #div1 
 
     { 
 
      position: absolute; 
 
      height: 147px; 
 
      width: 336px; 
 
      right: 38%; 
 
      top: 49px; 
 
      border-radius: 10px; 
 
      border: medium solid #FF0000; 
 
      
 
     } 
 

 
       #div2 
 
     { 
 
      position: absolute; 
 
      height: 58px; 
 
      width: 175px; 
 
      right: 27%; 
 
      top: 42px; 
 
      border-radius: 10px; 
 
      border: medium solid #0000FF; 
 
      text-align: center; 
 
      font-weight: 700; 
 
       } 
 

 

 
    </style> 
 
</head> 
 
<body> 
 

 
     <div id="div1"> 
 

 
     <div id="div2"> 
 
      click on div2 jquery 
 
     </div> 
 
     </div> 
 

 
</body> 
 
</html>

+0

Vielen Dank ... antworte wunderbar und schnell 100% –

0

Geben Sie einfach false zurück, wenn die Funktion angehalten werden soll, damit das Ereignis nicht an die übergeordneten Elemente weitergegeben wird. Versuchen Sie es auch mit console.info(); Öffnen Sie Ihre Firebug-Konsole und klicken Sie dann auf das Div, dann werden Sie Nachrichten in der Konsole in blauer Farbe sehen, viel besser als alert();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<!DOCTYPE html > 
<html> 
    <head> 
     <script src="javas/jquery-1.12.2.min.js" type="text/javascript"></script> 
     <title>click on div2 jquery </title> 
     <script type="text/javascript"> 
      $('document').ready(function() { 

       $('#div1').click(function() { 
        console.info('Div 1 clicked'); 
       }); 

       $('#div2').click(function (event) { 
        console.info('Div 2 clicked'); 
        return false; 
       }); 

      }); 
     </script> 
     <style type="text/css"> 
      #div1 
      { 
       position: absolute; 
       height: 147px; 
       width: 336px; 
       right: 38%; 
       top: 49px; 
       border-radius: 10px; 
       border: medium solid #FF0000; 

      } 
      #div2 
      { 
       position: absolute; 
       height: 58px; 
       width: 175px; 
       right: 27%; 
       top: 42px; 
       border-radius: 10px; 
       border: medium solid #0000FF; 
       text-align: center; 
       font-weight: 700; 
      } 
     </style> 
    </head> 
    <body> 

     <div id="div1"> 

      <div id="div2"> 
       click on div2 jquery 
      </div> 
     </div> 

    </body> 
</html> 
Verwandte Themen