Detect div > ul has been changed

Question

I have some test code.

 <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>

As soon as we click on "btnId" li gets added in ul and div has been changed. Similarly, if we remove li ul gets changed and div has been changed. Is there any way to get information that div > ul has been changed and on which event should we trigger the code in order to know change? I tried for DOMSubTreeNodeChanged mutator events but as per google, it has compatibility issues and not to use.

Try to look at this [mutator event](https://stackoverflow.com/questions/15657686/jquery-event-detect-changes-to-the-html-text-of-a-div)? — gitguddoge, Sep 19 '18 at 01:59
I think this might work for you as mentioned by @gitguddoge. ref: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#Example — trk, Sep 19 '18 at 03:04

score 1 · Accepted Answer · answered Sep 19 '18 at 02:57

How about this:

$("#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>

Detect div > ul has been changed

1 Answers1