Question

我有一些测试代码。

 <div class="someclass" id="someid">
    <div class="form-someclass1 class2 ">
    <div class="button action right addbutton" id="btnId"><i class="add"></i> Add</div>
   </div>
    <ul class="ui-sortable">
           <!-- dynamically li gets added. -->
    </ul>
  </div>

一旦我们单击“ btnId”，就会在ul中添加li，并且div也已更改。同样，如果我们删除li ul，则它会被更改而div已被更改。 是否有任何方法可以获取div> ul已更改的信息，我们应该在哪个事件上触发代码以了解更改？ 我尝试了DOMSubTreeNodeChanged mutator事件，但是根据Google的说法，它存在兼容性问题，因此无法使用。

Answer 1

如何？

$("#btnId").on('click', function(e){
    //alert(1112);
    var target = $(this).closest(".someclass").find(".ui-sortable");
    target.append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
});

$(document).on('DOMNodeInserted', function(e) {
    //check if li inserted to ul
    if(e.target.localName == "li"){
        //do somethings!
        console.log("Inserted a li for ul!");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="someclass" id="someid">
        <div class="form-someclass1 class2 ">
            <div class="button action right addbutton" id="btnId"><i class="add"></i> Add</div>
       </div>
        <ul class="ui-sortable">
               <!-- dynamically li gets added. -->
        </ul>
    </div>

检测div> ul已更改

1 个答案: