的HTML list 为,

<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元素中。
在这里,我向第四个li元素添加了class =“selected”。

当将选定的类添加到任何li元素中时,要执行一些代码。

尝试了这个,但是没有按预期工作。
<script>
    $(function() {
        $('#slider').bind('DOMSubtreeModified', function(e) {
            alert("Changed");
        });
    });
</script>

最佳答案

最好的方法就是在添加类时调用函数,因为这是添加代码的代码。

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

  • 您可以通过直接调用来做到这一点:
    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),但是坦率地说,如果您控制添加类的代码,则实际上不需要使用那些。

    07-24 09:46
    查看更多