Add attribute to all newly created elements

Question

For example add to all new links attribute target with value _blank or to all new <div>s attribute title with random value. Any ideas except setTimout()?

UPD: I need something like .attrGlobal(). ~~This answer allows to do that only with links and their attribute target~~, but how to do that with all elements and all their attributes?

UPD2: Trying MutationObserver as SLaks recommended but firefox freezes when clicking on add button http://jsfiddle.net/1337/wvfkc/5/.

And what does setTimeout have to do with it? How are these elements being added? Please show us the code. — Richard, Aug 21 '13 at 20:07
@ancap, how to you add them to the html? ajax with `.append()`, `.html()`, or? — Sergio, Aug 21 '13 at 20:09
You need some way to signify that they are new elements. maybe add a class to them upon creation and use that class as a starting point — Mic1780, Aug 21 '13 at 20:10
@Sergio doesn't metter. If element somehow created i need to add to him attribute with random value. — Artem P, Aug 21 '13 at 20:13
The best way to do this would be to just add the attribute whenever you create the element, that's why we're asking how you're creating the elements — adeneo, Aug 21 '13 at 20:15

score 1 · Answer 1 · edited May 23 '17 at 12:05

1

You can do like is explained in this answer. jQuery: Is there a way to automatically add attributes to dynamically generated HTML, in the same way that live() works with events?

Since .live is deprecated, use .on instead.

Use .on to accomplish what you are looking to do with the links like so

$('a').on("click", function(e) {
   $(this).attr('target', '_blank');
});

edited May 23 '17 at 12:05

Community

1
1

answered Aug 21 '13 at 20:12

Zack

2,789
33
60

Except that `.live` has been deprecated, so use `.on()` -- almost identical. – cssyphus Aug 21 '13 at 20:15
`.live()` deprecated LOL. But I expected this answer. – Artem P Aug 21 '13 at 20:20
ops this not work with newly created [jsfiddle.net](http://jsfiddle.net/1337/VC9dr/2/) – Artem P Aug 21 '13 at 21:18

Artem P · Accepted Answer · 2013-09-04T03:21:22.140

1

Finally found solution.

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function() {
  $("a").attr("target", "_blank");
  $("div").attr("title", Math.floor(Math.random() * 1000));
});

observer.observe(document, {
  subtree: true,
  childList: true
});

jsfiddle.net

In options you need subtree: true always, and if you changes attributes do not add to options attributes: true because MutationObserver(function(mutations, observer) { will go into the eternal cycle and browser freezes.

edited Sep 04 '13 at 03:21

answered Aug 26 '13 at 18:49

Artem P

5,198
5
40
44

1

+1 I have having a hard time understanding why Firefox kept freezing when I had 'attributes: true' in the observer block! Now detecting changes is a piece of cake! – iglvzx Jul 31 '14 at 17:59

score 0 · Answer 3 · answered Aug 21 '13 at 20:29

The answer depends on how you add the new elements so jQuery can find them. To answer more precise we would need to know also the parent of the elements and if there are other elements that should not get changed.

If you add by ajax, the best would be to put this code in the success function.

$('#parentDivID a').prop('target', '_blank'); //this changes the atributes of all a element
$('#parentDivID div').prop('title', Math.floor(Math.random()*1000); //give random nr to title

score 0 · Answer 4 · answered Aug 21 '13 at 21:37

0

is this what you're trying to do? (assuming clicking a button inserts new elements)

function setAttrs() {
    $('a').attr('target', '_blank');
    $('div').attr('title', new Date().getTime());
}
$(function() {
    setAttrs();
    $('button').on('click', function(e) {
        e.preventDefault();
        $('body').append('<div>text</div> <a href="//google.com">google</a>');
        setAttrs();
    });
});

FIDDLE

answered Aug 21 '13 at 21:37

Neil S

2,304
21
28

What if content added but nothing was clicked? What if something clicked but content added async? – Artem P Aug 21 '13 at 21:48
the `setAttrs` function just needs to be called whenever the content is added. if it is added asynchronously, then the function call should be executed in the success callback function of the ajax request. – Neil S Aug 21 '13 at 22:27

Add attribute to all newly created elements

4 Answers4