How can on click div2 show a message jquery

In the example below on click div2 show a message for div2 only , not show the message of div1 ?This required....How can do this ...I hope to get the solution... Gratefully In the example below on click div2 show a message for div2 only , not show the message of div1 ?This required....How can do this ...I hope to get the solution... Gratefully

<!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>
	<div id="div1">
        <div id="div2">
             click on div2 jquery
        </div>
    </div>
</body>
</html>

Answers 1

  • Just return false when you want your function to stop so that it won't propagate the event to parent. Also try using console.info(); Open your firebug console and then click on the div, then you will see messages in console in blue color, much better then 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>
    

Related Articles