Question

将html列表设为，

<ul id="slider">
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class="selected"></li>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
<ul>

我正在将 选定的 类添加到任何li元素中。在这里，我将class =“selected”添加到第四个li元素。

当将选择添加到任何li元素时，想要执行一些代码。

尝试了这个，但没有按预期工作。

<script>
    $(function() {
        $('#slider').bind('DOMSubtreeModified', function(e) {
            alert("Changed");
        });
    });
</script>

Answer 1

在click事件上添加Class后，只需调用一个函数。

$(function() {

    function doSomething() {
      .....
    }

    $('ul').on('click', 'li' function(e) {
          $(this).addClass('selected');
          doSomething();
    });
});

Answer 2

处理此问题的最佳方法是在添加类时调用函数，因为这是添加它的代码。

有两种常见的方法可以做到这一点：

您可以直接致电：

li.addClass("selected");
doSomethingBecauseItChanged(li);

或者你可以通过在其他代码可以监听的li元素上引发自己的事件来做到这一点，这样就可以更彻底地解除将代码与响应更改的代码相加的代码。

以下是监听活动的代码：

$("#slider").on("added-class", function() {
    alert("Changed");
});

这是添加类并引发事件的代码：

li.addClass("selected").trigger("added-class");

请注意added-class是我编写的名称，而不是已存在的名称。使用您喜欢的任何名称，只要确保不与现有的事件类型冲突。

以下是一个完整的示例：Live Copy | Live Source

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Event Example</title>
  <style>
    li.selected {
      color: green;
    }
  </style>
</head>
<body>
<p>In two seconds, the third item will turn green and you'll see an alert.</p>
<ul id="slider">
    <li class="">xxxxx</li>
    <li class="">xxxxx</li>
    <li class="">xxxxx</li>
    <li class="">xxxxx</li>
    <li class="">xxxxx</li>
    <li class="">xxxxx</li>
    <li class="">xxxxx</li>
  </ul>
  <script>
    $("#slider").on("added-class", function() {
      alert("Changed");
    });
    setTimeout(function() {
      $("#slider li").eq(2).addClass("selected").trigger("added-class");
    }, 2000);
  </script>
</body>
</html>

或者，如果您不需要IE支持，则可以使用mutation observer（support matrix），但坦率地说，如果您控制添加的代码，您真的不需要使用它们类。

Answer 3

添加类时注册处理程序。这样的事情

$('li').addClass('selected').trigger('class-change');
$('#slider').bind('class-change', function() {
  //do something
 });
});

将类添加到li时检测事件

3 个答案: