Avoiding DOMSubtreeModified event to be fired on adding ID to a tag

Question

I am using DOMSubtreeModified to get all DOM changes in a div.

var stoppedTyping="";
$(".jqte_editor").on("DOMSubtreeModified", function(e) {
    if (stoppedTyping) clearTimeout(stoppedTyping);
      stoppedTyping = setTimeout(function(){
        var editorText = $(".jqte_editor").html();

        createUniqueId($(".jqte_editor"));
        console.log(editorText);
      }, 1000);
});

In above code, on DOM change, i am calling createUniqueId() function.

function createUniqueId(tag){
   var children = tag.children();
   if(children.length > 0)
   {
    for ( var i = 0; i < children.length; i++) {
        var child = children[i];
        var childId = $(child).attr("id");
        if(childId == undefined)
        {
            var id = UUID.generate();
            $(child).attr('id', id);
        }
    }
   }       
}

The above code creates a unique ID for each tag which does not have an id.
On assigning Id, DOMSubtreeModified event is fired.
How can i avoid it from firing DOMSubtreeModified event on assigning ID?

Answer 1

The problem with DOMSubtreeModified is that it is a very coarse grained event. Perhaps you don't need to prevent the event from firing if you would let your event handler be more specific. Which event do you really want to react to? If you could filer that out by using the event object e in your event handler or by simple binding a more fine grained event handler like OnKeyPress you probably wouldn't have this problem.