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

Question

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.

use `.on` to bind click event. like `$(document).on("click",".Menuspan",function () { //do stuff });` — Parth Trivedi, Jan 20 '16 at 08:21

score 1 · Accepted Answer · answered Jan 20 '16 at 08:23

1

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
 });

answered Jan 20 '16 at 08:23

Parth Trivedi

3,802
1
20
40

score 1 · Answer 2 · answered Jan 20 '16 at 08:23

When you run that JavaScript it binds to the DOM as it exists at that time. New elements do not hence have the event in the DOM.

Changing it to something like this would bind the event to an existing element, but fire on any child element.

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

    alert(this1);
});

You could bind this to the UL element, rather than document if you give that an ID.

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

2 Answers2