Question

I have a web page which posts to a server and the server returns some HTML:

<select id="selectmodel"><option value="0">Model</option></select>

This HTML goes into a TD tag (#td2) as shown below and all seemingly works fine:

$.post("/cgi-bin/gcp.dll/modelx",{ manufacturerVal: window.manufacturerVal}, function(data) {$('#td2').html(data)});

However, it seems that some other ID’s disappear. When I try the line below before the post, it works fine. Afterwards, it no longer works:

$("#td5").click(function() {if (document.getElementById("table2")){alert("table2 exists")}else{alert("table2 does not exist")}});

The TD tag (#td5) lies below the TD tag (#td2). When I try the same test on #table1 – a table that contains #td2 and #td5 – it does not disappear. Here is a simplification of the HTML:

<table id="table1"><tr>
<td id="td2"> ... </td>   <-- dynamically created select tag goes here
<td id="td4"><table id="table2"><tr><td> ... </td></tr></td> 
<td id="td5"> ... </td>
</tr></table> 

Any ideas?

Answer 1

After following the link in your comment above:

The table with id table2 is inside the td with id td4. You have the change1() function bound to the change event of the select element. That function includes this line:

$("#td4").html(" ");

Which overwrites the original html with the non-breaking space. So the 2nd alert is correct. table2 does not exist.