How do I let the DOM know about new elements created on the fly?


Tags: javascript,jquery,html,css,dom

Problem :

I am making an AJAX call and I am building some HTML on the backend side. I am returning them as a JSON and then using jQuery I render them, something like:

$(data.message).each(function (index, value) {
    $('#states_table tbody').append('<td>' + value.edit_link + '</td>');
});

value.edit_link contains the following HTML:

<a id="edit_0" 
   title="Edit" 
   onclick="javascript:return false;" 
   class="edit"
>Edit</a>

Then I will end up with something like this:

enter image description here

And as you can see the link doesn't have the hand cursor. My guess is that the DOM doesn't know about them when the page is rendered for first time so no CSS properties or default properties will be applied which makes me ask:

In order to have the links with the cursor: hand, how do I let the DOM know about this new elements?



Solution :

Solution 1

Add to your link html href="#" or href="javascript:void(0)" so:

<a href="#"
   id="edit_0" 
   title="Edit" 
   onclick="javascript:return false;" 
   class="edit"
>Edit</a>

For a full comprehension of <a> html tag read this.

If you don't know if is better href="#" or href="javascript:void(0)" (nobody knows) read this discussion.

Solution 2

Don't use an <a> but a <button> following the sentiment:

if <a> button doesn’t have a meaningful href, it’s a <button>

(for someone a <button> outside a <form> feels wrong. You decide.)

so:

<button id="edit_0" 
   onclick="javascript:return false;" 
   class="edit"
>Edit</button>

Button reference there.


    CSS Howto..

    How do I make a Javascript alert display only once, ever? [closed]

    How to add html classes to a Django template 'for-loop' dynamically?

    How to animate 2 css layouts from left to right or from right to left with jquery?

    Flexbox used for equal height, however it is ignoring column width in grid system

    How this blur works

    How to solve divs overlapping issue and maintain css fluid layout?

    CSS - How to make
    side by side not wrap when user make browser size changing?

    How to apply css to id generated dynamically?

    how to see which CSS class is applied or where is that font-size coming from, from which class or tag

    How can I increase space just above the footer line?

    How to animate to position fixed?

    how to create a pricetag like border around list items

    How to remove hover effect from CSS?

    How to set this CSS arrow transparent?

    How to push elements after absolute element

    How to fill width with flex boxes

    How to keep footer at bottom of screen using jQuery

    how to display navigationMenu div left side of the slider

    How to raise css rules priority for an html snippet

    How to scale jumbotron bootstrap on larger monitors?

    How to detect the form is blank or not by jQuery

    How to rearrange several divs on window resize - jQuery or CSS

    How to make my first-child in css work properly?

    How to trim off Image in CSS?

    how to remove the css overflow:hidden of jquery dialog

    How to replace a Font Awesome icon within link text with a different icon on link click?

    How to center body on a page?

    Outlines and Borders not showing at all in IE

    How to set line spacing of an ordered list consistently across browsers?

    How to draw a line with button the center of the line