Question

我对委托有问题。主要问题是，该委托不处理动态创建的元素。

＆＃13;

$('.menu').delegate('> li', 'click', function() {
  var thisId = this.id;
  alert(thisId);
});

$('#but').click(function() {
  $('#2').append('<ul><li id="new">yyy</li></ul>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
  <li id="1"><a>xxx</a>

  </li>
  <li id="2"><a>xxx</a>

  </li>
  <li id="3"><a>xxx</a>

  </li>
  <li id="4"><a>xxx</a>

    <ul class="menu">
      <li id='old'>old</li>
    </ul>
  </li>
</ul>
<button id="but">add</button>

＆＃13;

此处您可以看到默认情况下带有一个子菜单的垂直菜单示例。接下来是这里的按钮，即添加子菜单。接下来我有简单的委托功能，即单击并返回被点击元素的id。出现问题，当我通过#but按钮添加新的子菜单并尝试点击它时，因为我将只获得父元素的Id而不是元素和父元素的id，因为它是非动态添加的ul（正如您在html源代码结束）。那么如何编辑我的脚本以仅返回一个id（点击元素的id，而不是clicked和parent），并使其适用于动态添加的元素？＆＃39;

Answer 1

除非纯粹用于其他样式，否则您的示例在其子菜单上不需要.menu。

您只需要定位顶部.menu内的所有LI（使用li）而不仅仅是子LI（您拥有> li）。您还需要停止传播到父级的点击（否则它将触发两次 - 在LI点击＆amp;然后再次点击祖父母LI）。

JSFiddle： http://jsfiddle.net/TrueBlueAussie/xnzs71d2/1/

$('.menu').delegate('li', 'click', function (e) {
    e.stopPropagation();
    var thisId = this.id;
    alert(thisId);
});

在jQuery的更高版本中，使用委派的on代替

$('.menu').on('click', 'li', function (e) {
    e.stopPropagation();
    var thisId = this.id;
    alert(thisId);
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/xnzs71d2/3/

Answer 2

// jQuery 1.7+
$('.menu').on('click', 'li', function() {
  var thisId = this.id;
  alert(thisId);
});

// jQuery 1.4.3+
$('.menu').delegate('li', 'click', function() {
  var thisId = this.id;
  alert(thisId);
});

委托不处理动态添加的元素

2 个答案: