Question

我有div：

<div id="ddDistr" class="searchBoxSortDistrict" tabindex="1">
  <ul id="ddd">
  </ul>
</div>

在其中我输入了来自json的html：

$("#ddd").html(" "), $.each(dis, function(
  index, value) {
    $("#ddd").append( "<li><a style=\"cursor: pointer;\">"
    + value.fieldName + "("
    + value.count + ")</a></li>");
   }
);

我想将onclick <li>课程更改为.active。

$('#ddDistr li > a').click(function() {
  console.log('dd');
  $(this).siblings('li').removeClass('active');
  $(this).addClass('active');
});

但它不起作用，我的代码中的问题在哪里？

此外，我想从活跃的value.fieldName元素中获取<li>并将其解析为POST。

我怎样才能得到它？

Answer 1

您已为锚元素使用了click事件。 $(this).siblings('li')不会工作，因为李不是锚的兄弟姐妹。你需要使用类似$(this).closest('li').siblings('')的东西。

更新：您还需要事件委派才能将事件附加到动态生成的元素

将类添加到单击的锚点父li：

$('#ddDistr').on('click', 'li > a',function() {
    console.log('dd');
    $(this).closest('li').siblings().removeClass('active');
    $(this).closest('li').addClass('active');
});

用于将类添加到单击的锚标记：

$('#ddDistr').on('click', 'li > a',function() {
  console.log('dd');
  $(this).closest('li').siblings().find('a').removeClass('active');
  $(this).addClass('active');
});

Answer 2

li不是a的兄弟，而是它的父母。

当您查看li > a时，这一点很清楚。

只需更改代码即可使用parent()：

$(this).parent().removeClass('active');

或者将点击处理程序分配给实际的li。

同样正如j08691建议的那样，read about使用.on()和事件委托。如果您在生成标记之前定义了单击处理程序，则它将无效，因为您只是将单击处理程序分配给现有内容。这就是您希望将事件委托给已存在的容器的原因。

jQuery从<li>获取对象值并更改</li> <li>类属性</li>

2 个答案: