Question

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

我使用<span>标记来显示它。现在我想在用户点击该范围时显示模态弹出窗口。主要有两个类别，一个是'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>"

              )
      )
    }

});

现在，运行时创建的span不起作用，因为当我展开树并生成新的子项时（脚本span标记）。它们都有类（如上所述）。但是当我点击新的时，屏幕上不会出现任何警报。请告诉我这里有什么问题。

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。

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

2 个答案: