更改动态创建的元素

Question

I'm building browser plugin (safari extension) that automatically changes an element (by "prepend"). It can be done by calling prepend like:

$(document).ready(function(){
  $("a").prepend("<img ...>").
})

But, how can I change elements that are created dynamically using javascript?

Answer 1

You can 1st create the object:

$(document).ready(function(){
    var img = $("<img ...>");
    $("a").prepend(img);
    // do something with img
});

Answer 2

You could listen for DOM change:

$("body").on("DOMSubtreeModified", function(){
    alert('DOM changed');
});

And than figure out what has changed. But that isn't clear from your question what you would like to do.

Answer 3

You can store the object you create in a global variable so it is available throughout your webpage... Like so:

var img;
$(document).ready(function(){
    img = $("<img ...>");
    $("a").prepend(img).
});

Then later on in some other function or something...

$(img).click(function() { 
     // blah
});

Answer 4

You can create trigger,

    $(document).ready(function(){
      $("a").prepend("<img id="imgId"...>").
        $(document).trigger('asd');
    })
$(document).on('asd', function() {

  });

Or you can create event listner

$(document).ready(function(){
          $("a").prepend("<img id="imgId"...>").

})
$(document).on('click','imgId',function(){

 });