1

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

              )
      )
    }

});

现在,运行时创建的跨度不起作用,因为当我展开树并生成新的子级时(脚本跨度标记)。两者都有(如上所述)。但是当我单击新的时,屏幕上不会出现任何警报。请告诉我这里有什么问题。

4

2 回答 2

1

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

利用

$(document).on("click",".Menuspan",function () {
 //do stuff
 });
于 2016-01-20T08:23:38.903 回答
1

当您运行该 JavaScript 时,它会绑定到当时存在的 DOM。因此,新元素在 DOM 中没有事件。

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

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

    alert(this1);
});

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

于 2016-01-20T08:23:40.393 回答