How to access an element (or its values) generated dynamically?

Asked

Viewed 520 times

4

I know it’s possible to use the on() and delegate the selector, so it accesses the dynamic element from a static element, but if it cannot use the on(), what to do?

For example, inside any function I need to take the id of an element added dynamically to change a style attribute and there is no event that fires the on():

jQuery

function(){
    if(1 + 1 == 2){
        //Não vejo como usar o on() nessa situação.
        $("#elemento").css("color", "black");
    }
    //Talvez...
    $("#elemento2").on((1 + 1 == 2), "#elemento", function(){
        $("#elemento").css("color", "black");
    });
}

Is there any other method, such as generating actions that are independent of other user actions or is it impossible to do this with jQuery?

jquery

  • I don’t understand! What do you want to do? You could explain briefly.

  • 1

    So you want a way for your script to always keep an eye out and be able to interact with new elements inserted in the DOM, without getting stuck to cursor events like Hover and click? I believe that a good are the Mutations Observers, but I still don’t have a very cool practice with them.

  • @Marcosfreitas, exact, I want to generate actions that are independent of the user, I will add this statement in the question, maybe I leave it more clarified.

  • Well, then I can only help you by indicating this article on M. Observers: http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers

  • Do you want something like an event that fires when a style is changed? Or do you just want to select the element with jQuery?

  • In this case, select the element with jQuery, in the example the #elemento should change the font color when 1 + 1 is equal to 2, but this does not happen, because the #elemento is added dynamically.

  • @Does Patrick have any specific case that raised that question? if yes please put the whole code or create a specific situation where this problem arises. To be honest I still don’t realize what you are looking to do...

  • By the way, take a look here, in case this is what you are looking for: https://github.com/naugtur/insertionQuery

  • I added another example to the code, I don’t know if it will help you understand...

  • If the action you want to be triggered is always the same, because you do not use CSS classes when creating dynamic elements?

  • @Kazzkiq, something like display: none and then display: block?

  • Patrick, what’s the problem with the code you posted (first if)? It works as long as the element exists on the page. And if it doesn’t exist, it makes no sense to change the color... Sorry, but it’s still hard to understand what you’re looking for.

  • Imagine that the element was added dynamically, without delegation it will not work.

Show 8 more comments

1 answer

4


It seems that you are confused about the need for delegation. When you select an element with jQuery - for example, with $('#algumId') –the element is selected only if it exists. If it doesn’t exist, you can’t do anything with it (such as changing content, attributes, or associating a function that handles an event in that element).

Event delegation is a way of defining how to treat events in a given element before it even exists in the DOM. However, at the time the event is triggered, the element naturally needs to already exist in the DOM for its delegated function to do something.

If you want to change the content or attribute of the element, just do it directly:

function pintaDePreto(){
    $("#elemento").css("color", "black");
}

It makes no sense to talk in delegation in that case, there are no events involved. If the element #elemento exist when the function is called, will be applied color: black in it. If it does not exist, nothing happens. This has nothing to do with whether or not the element is added dynamically, but rather with the very existence of the element in the GIFT. If it does not exist, it makes no sense to want to change the color! Then just make sure that the function will be called when the target element exists.

  • So you use delegation only where there are events, otherwise just do as in your example?

  • This, in fact what is called "delegation" is Event delegation, therefore delegation of events.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.