stopImmediatePropagation() is not working

Question

am trying to use stopImmediatePropagation to stop twice hit in button. stopImmediatePropagation is not working well and I don't know how to remove from div after adding one data to text. My code is as follows:

<style type="text/css"> 

.display_box {  background-color:white; color:Black;}

.active {  background-color:blue;}

.display_box.active {  background-color:blue;}

</style>




<script type="text/javascript">
//add dynamic data
$(document).ready(function () {
    var flag;

    $("#<%=TextBox1.ClientID %>").bind("keydown", function (e) {

        var showText = '';
        if (!flag) {
            showText += "<div class='display_box'>content1</div>";
            showText += "<div class='display_box'>content2</div>";
            showText += "<div class='display_box'>content3</div>";
            showText += "<div class='display_box'>content4</div>";
            showText += "<div class='display_box'>content5</div>";


            $('#display').html(showText).show();
            flag = true;
        }
        //click event
        var itemClick = $('#display').find('.display_box');
        $('.display_box').hover(function () {
            var li = $(this);
            li.addClass('active');
        }, function () {
            var li = $(this);
            li.removeClass('active');
        });

        $('.display_box').live('click', function (e) {
            e.preventDefault();
            var contents = $("#<%=TextBox1.ClientID %>").val();
            if (contents != '') {
                var last = contents.slice(0, 0);
                var result = $(this).text();
                $("#<%=TextBox1.ClientID %>").focus().val(contents + result);
            }

            $('#display').hide();
            bl = false;
            flag = false;                  

            e.stopImmediatePropagation();

        });


    });

    $("#<%=TextBox1.ClientID %>").bind("keyup", function (e) {
        var $activeslide = $('.display_box.active');
        var targetslide = null;


        if (e.keyCode == 40) {

            if ($activeslide.next('.display_box').length) {
                targetslide = $activeslide.next('.display_box');
            } else {
                $('.display_box').first().addClass('active');
                targetslide = $('.display_box:first');
            }

        }

        if (e.keyCode == 38) {

            if ($activeslide.prev('.display_box').length) {
                targetslide = $activeslide.prev('.display_box');
            } else {
                targetslide = $('.display_box:last');
            }

        }
        if (e.keyCode == 13) {

            alert("enter");
            //itemClick.click();
        }
        if (e.keyCode == 8) {

        }
        if (targetslide) { targetslide.addClass('active'); }
        $activeslide.removeClass('active');

    });
});

 function SetMentionTrigger() {
            $("#<%=textbox1.ClientID %>").append('@');
            var text = $("#<%=textbox1.ClientID %>").text();


        }

  <form id="form1" runat="server">
<div>
      <asp:TextBox runat="server" ID="textbox1" ></asp:TextBox>
      <a href="javascript:return(false);" onclick="SetMentionTrigger();">Add</a>
</div>
</form>

Answer 1

1. .bind and .live are replaced by .on

2. move the return false to after the SetMentionTrigger onclick="SetMentionTrigger(); return false" or better: assign in in the load event and use e.preventDefault()

Give the link an ID

---

$("#<%=Link1.ClientID %>").on("click", function (e) {
  e.preventDefault()
  SetMentionTrigger();
});

To attach an event handler to an item that is dynamically created you need

$('#display').on("click",".display_box",function() {
  ...
});
$('#display').on("hover",".display_box",function() {
  ...
});

Answer 2

return false; is working instead of stopImmediatePropagation()