CODEWITHSUNDEEP
jquery
bigpotato
bigpotato

Reputation: 27497

jQuery: Add ID to newly generated DOM element

So I have a div with class ngg-navigation. I needed to add an ID to it using jQuery because I can't touch the HTML directly. Here's what I had:

    jQuery(function($){
        $('.ngg-navigation').attr('id', 'ngg-navigation-id');
    });

This works fine on the initial load, but there's other javascript that does AJAX and refreshes the div, resulting in the disappearance of the ngg-navigation-id ID. Is there a way to add the ID every time it appears?

Upvotes: 0

Views: 119

Answers (5)

Yabada
Yabada

Reputation: 1758

I guess you could wrap your DIV within another, and apply the id to this parent DIV.

This way the children DIV can change and still be found using $('#yourID').find('.ngg-navigation') for exemple.

Not sure this method is clean but it should work well and quickly.

Upvotes: 0

gen_Eric
gen_Eric

Reputation: 227200

In the comments, you say that the only reason you want to add an ID is for CSS specificity.

You don't need an ID for that, you just need to make your CSS selector more specific.

Instead of doing:

.ngg-navigation{
}

Try to make that more specific by adding a parent before it. Like:

#parent-element .ngg-navigation{
}

Upvotes: 2

Andy G
Andy G

Reputation: 19367

As others have mentioned, the id seems unnecessary, as you are able to refer to the element by its class-name. Presumably, it is the first or only element with this class. You can always refer to it as:

$('.ngg-navigation').first()

Whenever you need to work with this element you could always, at that time, add the id.

If you want to, though, you could investigate jQuery ajaxComplete, to register a handler to be called when Ajax requests complete.

Based on your recent comment though, if you need to override the css, then you could use jQuery to do this, setting the rules that you need; this will override its current css.

Upvotes: 0

PlantTheIdea
PlantTheIdea

Reputation: 16359

Just turn that into a function, and call it whenever you need to:

function setId(){
    $('.ngg-navigation').attr('id', 'ngg-navigation-id');

    // you may want to consider this, as its faster:
    // $('.ngg-navigation)[0].id = 'ngg-navigation-id';
}

You can call it on page load (as you're doing), a callback from an AJAX call, when your cat faints ... whatever.

$(function(){
    setId();

    $.ajax({
        ...
        success:function(){
            setId();
        }
    });
});

This also assumes you only have a single element with class ngg-navigation, otherwise you will have invalid HTML.

You can also make it a bit more reusable by doing parameters:

function setId($item,newID){
    $item.attr('id',newID);

    // or the faster alternative:
    // $item[0].id = newID;
}

And the call:

setId($('.ngg-navigation'),'ngg-navigation-id');

This way you can pass in any other jQuery object / ID pairing and it will set your ID for you. Just food for thought.

Upvotes: 1

Bas Slagter
Bas Slagter

Reputation: 9929

I think you might want to add some code that, on every refresh of the div, does your replace action.

Upvotes: 0

Related Questions