在运行时间创建的 Span 在脚本中无法在 mvc 中正常工作

Question

我有一个 MVC 项目，在 BusinessPosition.cshtml，我在运行时间创建了一个树视图。默认情况下，在页面加载时，它将显示根 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>

我用了<span>标签来显示它。现在我想在用户单击该跨度时显示模态弹出窗口。主要span有两个classes，一个是'Menuspan'，另一个是'LessMenuspan'。我在脚本中写了一段代码，比如

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

    alert(this1);
});

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

});

在页面加载时，当我点击时它会触发警报。很好，但在脚本中我写了这样的代码

 $.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>"

              )
      )
    }

});

现在，运行时间创建的跨度不起作用，因为当我展开树时会生成新的子节点（脚本跨度标记）。两者都有 class （如上所述）。但是当我点击新的时，屏幕上没有出现任何警告。请告诉我这里有什么问题。

Answer 1

您必须使用 delegate 事件绑定。 .click 不适用于动态添加的元素/它仅适用于已经在 DOM.

中的元素

使用

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

Answer 2

当您运行时，JavaScript 它会绑定到当时存在的 DOM。因此，新元素在 DOM.

中没有事件

将其更改为这样的内容会将事件绑定到现有元素，但会在任何子元素上触发。

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

    alert(this1);
});

您可以将它绑定到 UL 元素，而不是文档，如果您给它一个 ID。

在运行时间创建的 Span 在脚本中无法在 mvc 中正常工作

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

html

asp.net-mvc

jquery

modalpopup

在 运行 时间创建的 Span 在脚本中无法在 mvc 中正常工作

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

html

asp.net-mvc

jquery

modalpopup

在运行时间创建的 Span 在脚本中无法在 mvc 中正常工作