How can on click div2 show a message jquery

Question

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>

Possible duplicate of [JQuery - $ is not defined](http://stackoverflow.com/questions/2194992/jquery-is-not-defined) — guradio, Apr 02 '16 at 04:51
I think my answer will help you. add stopPropagation(); function. — Sameera Liyanage, Apr 02 '16 at 04:59
@TARIQ I posted another solution using return. Have a look, besides you will get to know more about console commands :-) — shivgre, Apr 02 '16 at 05:42

score 0 · Accepted Answer · answered Apr 02 '16 at 04:58

<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>

score 0 · Answer 2 · answered Apr 02 '16 at 05:40

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>

How can on click div2 show a message jquery

2 Answers2