0

How can i watch for html changes. I have one button witch will add more html, when im saving the data with ajax, ajax won't watch/read the added html.

As it is now when i click save the new html is not processed.

$("#more_column").click(function(e){
     $(col).after('<div class"class"></div>.......')
});

I append this html, this html appended won't be processed with the ajax later. How to make the ajax or jquery watch for html changes? Any idea ?

I have seen also alternatives with Vue.js if there are any examples please share.

Edo
  • 117
  • 2
  • 14
  • 1
    You either want to look at [event-delegation](https://learn.jquery.com/events/event-delegation/) or [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) depending on what your requirements are, or overthink the way you are invoking your ajax call – empiric Sep 05 '18 at 07:39
  • I just need to listed for html changes before save, eg everything under this parent div `
    ` should be watched, if anything is added or delete watch before save.     – Edo Sep 05 '18 at 07:41
  • https://stackoverflow.com/a/50494102/125981 may give you what you need – Mark Schultheiss Dec 03 '18 at 15:27

1 Answers1

0

You can do this. you have to add your ajax success callback.

$.ajax({
    method: "POST",
    url: "data.php",
    data: { key: "id", value: "1234" }
}).done(( data ) => {
    $(col).after(`<div class"class">${data}</div>`)
});

reference: http://api.jquery.com/jquery.ajax/

seunggabi
  • 1,699
  • 12
  • 12