CODEWITHSUNDEEP
javascriptjqueryhtml
Andrej Karadzic
Andrej Karadzic

Reputation: 170

JQuery won't select appended hidden element

I am dynamically adding elements:

$.ajax({
    type: "POST",
    url: url,
    success:function(data) {
        $('#trNew').before( data );
    }
});

and data:

<tr id="val1">
    <td>...</td>
    <td><a id="e1" href="#" onclick="return editRow('e1')">Edit</a></td>
    <div class="hide" id="popup1">
        <input type="text">
        <button>Save</button>
    </div> 
</tr>

is inserted in the proper place. However, in editRow() (which gets invoked properly) when I try to select $("#popup18") or $("#popup18:hidden"), nothing gets selected. document.getElementById("popup1") also returns undefined.

Is there something I am missing?

Upvotes: 1

Views: 85

Answers (2)

AmanVirdi
AmanVirdi

Reputation: 1685

thisTry to change the line in html, like this:

 <td><a id="e1" href="#" onclick="return editRow(this)">Edit</a></td>

I have changed the editRow(this) from editRow('e1'). This will pass the anchor element as object.

And change your Html lik:

<tr id="val1">
    <td>...</td>
    <td><a id="e1" href="#" onclick="return editRow(this)">Edit</a>
        <div class="hide" id="popup1">
           <input type="text">
           <button>Save</button>
        </div> 
    </td>
</tr>

You can try this working on fiddle http://jsfiddle.net/AmanVirdi/ELK8c/

Upvotes: 2

birdspider
birdspider

Reputation: 3074

As far as I know, the tr does not support divs as children

http://www.w3.org/html/wg/drafts/html/master/tabular-data.html#the-tr-element

Zero or more td, th, and script-supporting elements

so thats basicly invalid html - therefor nothing or everything may work - depends on how the stars are aligned today

Upvotes: 5

Related Questions