Span created at run time In script not working Properly in mvc

I have one MVC project , In BusinessPosition.cshtml, i am creating a tree view at run time. by default at page load it will display main child of root node.like,

<ul class="col-lg-20 col-sm-12 col-xs-12" style="margin-left:20px">

  @foreach (var i in Model)
  {
      if(i.ChildCount<3)
      {

  <li class="Limenu" data-placement="right" data-toggle="tooltip" title="Childs">

      <span class="collapse collapsible" data-loaded="false" id="@i.ConsumerNo_">&nbsp;</span>
      <span class="LessMenuspan btn-primary" id="@i.ConsumerNo_" style="border-radius:10px"  data-toggle="modal" data-target="#ConsumerInfo"><strong class="btn btn-xs"  >@i.ConsumerNo_</strong></span><br />

  </li>
      }
      else{

  <li class="Limenu" data-placement="right" data-toggle="tooltip" title="Childs">

      <span class="collapse collapsible" data-loaded="false" id="@i.ConsumerNo_">&nbsp;</span>
      <span class="Menuspan btn-primary" id="@i.ConsumerNo_" style="border-radius:10px" data-toggle="modal" data-target="#ConsumerInfo"><strong class="btn btn-xs" >@i.ConsumerNo_</strong></span><br />

  </li>
      }

  } 

</ul>

I used <span> tag to display it. Now I want to display Modal popup when user will click on that span. mainly span have two classes one is 'Menuspan' and another is 'LessMenuspan'. i write a code in script like

$('.Menuspan').click(function () {
    var this1 = $(this).attr("id");

    alert(this1);
});

$('.LessMenuspan').click(function () {
    var this3 = $(this).attr("id");
    alert(this3);

});

At page load it will fire alert when i clicked. fine but in script i written the code like

 $.each(d, function (i, ele) {
    if (ele.ChildCount < 3) {

        $ul.append(
        $("<li></li>", { "id": 'treeLi' }).append(

          "<span class='collapse collapsible' data-loaded='false' pid='" + ele.ConsumerNo_ + "'>&nbsp;</span>" +
          "<span class='LessMenuspan btn-primary' pid='" + ele.ConsumerNo_ + "' data-toggle='modal' data-target='#ConsumerInfo' ><strong class='btn btn-xs' >" + ele.ConsumerNo_ + "</strong></span>"

              )
         )
    }
    else {
        $ul.append(
        $("<li></li>", { "id": 'treeLi' }).append(

          "<span class='collapse collapsible' data-loaded='false' pid='" + ele.ConsumerNo_ + "'>&nbsp;</span>" +
          "<span class='Menuspan btn-primary' id='" + ele.ConsumerNo_ + "' data-toggle='modal' data-target='#ConsumerInfo'><strong class='btn btn-xs' >" + ele.ConsumerNo_ + "</strong></span>"

              )
      )
    }

});

Now , that runtime created span is not working, because when I expand tree and new children are generated (script span tag). which have both of class (mentioned above). but when I click new one, no any alert appear on screen. Please tell me what is problem here.

You have to use delegate event binding. .click not works for dynamically added element/ It only works for element already in DOM.

use

$(document).on("click",".Menuspan",function () {
 //do stuff
 });