Problem Description
I'm writing a function using the mutation observer with jQuery to register changes to the DOM, specifically when a new node is added so i can change its content:
$("SELeCTOR GOOD" ).click(function(){
var targetNode = $(this).find('.content').get(0);
var config = { attributes: true, childList: true, subtree: true, attributeOldValue: true };
// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
var courses = $(targetNode).find('.courses').get(0);
$(courses).find('.coursebox.clearfix').each(function( index,item ) {
var attacherURL = $(item).find('.coursename a').attr('href');
var moreInfoURL = '<a class="btn btn-outline-primary pull-right" href="'+attacherURL+'">More info</a>';
var oldHTML = $(item).find('div.moreinfo').html();
var newHTML = moreInfoURL + oldHTML;
//this following line is supposed to replace the html, but it creates an infinite loop
$(item).find('div.moreinfo').html(newHTML);
//end
});
}
else if (mutation.type == 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}
}
};
I've tried append/prepend as well, but everything creates the same infinite loop. As usual, any help is greatly appreciated.
Regards
AI-Generated Solution
Powered by LMSouq AI · GPT-4.1-mini
Analyzing problem and generating solution…
Was this solution helpful?