locked
click event not unique to my class RRS feed

  • Question

  • User1868852945 posted

    Below is a simple example of nesting two div's, level_one and level_two, each with  javascript click event to alert the id when the div is clicked.

    When I click on a level_one div, it works fine but when I click on a level_two div, both click events fire causing both alerts to display (I would expect level_two alert only)

    I have proven that all ID's are unique.  I also tried  taking out all razor code and hard coded the same data and the alerts worked as expected.

    Why does $('.level_one').click(function fire when I click on a level_two div?

    Thanks so much if someone can spot the issue.

    @model IEnumerable<myproj.mymodel>


    @*<!DOCTYPE html>*@
    <!doctype html>

    <html>
    <head>
    <meta name="viewport" content="width=device-width" />
    <title>Live Demo Home</title>
    <script src="~/js/jquery-2.1.3.min.js"></script>
    @*<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>*@

    <style type="text/css">

    .level_one {
    background-color: yellow;
    width: 99%;
    margin: .5%;
    }

    .level_two {
    background-color: yellow;
    width: 99%;
    margin: .5%;
    }
    </style>

    <script type="text/javascript">
    $(function () {
    $('.level_one').click(function () {
    alert("level_one CLICKED this.id: " + this.id);
    });


    $('.level_two').click(function () {
    alert("level_two CLICKED this.id: " + this.id);
    });
    });
    </script>

    </head>
    <body>
    @foreach (var level_one_key in Model.Select(s => s.db_type).Distinct().ToArray())
    {
    <div class="level_one" id="@level_one_key">@level_one_key
    @foreach (var level_two_key in Model.Where(w => w.db_type == level_one_key && w.row_type == "sch"))
    {
    <div class="level_two" id="@level_one_key@level_two_key.sch" style="display: block; margin-left: 4%;">@level_two_key.sch</div>
    }
    </div>
    }
    </body>
    </html>

    Wednesday, December 14, 2016 8:03 PM

Answers

  • User-691209617 posted

    use event.StopPropagation() for more detail check this link

    $( "p" ).click(function( event ) {
      event.stopPropagation();
      // Do something
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 14, 2016 8:48 PM

All replies

  • User-691209617 posted

    use event.StopPropagation() for more detail check this link

    $( "p" ).click(function( event ) {
      event.stopPropagation();
      // Do something
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 14, 2016 8:48 PM
  • User1633621018 posted

    Thats happening because your level_two_key is also part of level-one-key.

    Wednesday, December 14, 2016 9:25 PM
  • User1868852945 posted

    level_one_key and level_two_key combined make for a unique id, this is not the cause of the problem.  Thanks for the feedback though.

    Wednesday, December 14, 2016 9:33 PM
  • User1868852945 posted

    Codemovement, thanks for the feedback if worked great.

    Wednesday, December 14, 2016 9:37 PM