CODEWITHSUNDEEP
jqueryhtmldomcss-selectors
vpbot
vpbot

Reputation: 2487

jQuery can't access the sought DOM element

I have the following HTML elements;

<div id="divOrderContainer">
 <ul id="ulOrders">
<li id="liAck">
  <div id="divViewOrderTitle"></div>
  <div id="divViewOrderSpacer"></div>
  <div id="divAcknowledgeItems"></div>              
</li>
<li id="liTemp">
  <div id="divViewOrderTitle">test</div>
  <div id="divViewOrderSpacer"></div>
  <div id="divTempItems"></div>
</li>
 </ul>          
</div>

On page ready, I do an ajax request, then upon response I will insert it into the existing DOM tree like;

htmlBuilder_Temp = htmlBuilder_Temp + '<li><table id="tableTemp">' +
 '<tr>' +
'<th>Ia</th>' +
'<th>Den</th>' +
'<th>Unt</th>' +
'<th>Ory</th>' +
'<th></th>' +
 '</tr>';               
htmlBuilder_Temp = htmlBuilder_Temp + 
 '<tr>' +
'<td> a </td>' +
'<td ""> +b+ </td>' +
'<td> +c+ </td>' +
'<td> +d+ </td>' +
'<td><span id="span'+posid+'">delete<span></td>' +
 '</tr>';           
htmlBuilder_Ack = htmlBuilder_Ack + '</table></li>';

The appending of the new elements is "ALWAYS" a success,

So here's my problem, I wanted to attach a click handler to every span under 

Table>tr>td>span,

that when clicked would alert me the element id however, when I try to check if the click handler is attached there wasn't any,

Click Handler Code:

$("#divTempItem > table > tbody > tr").('click', 'td span', function(){
   alert($(this).attr("id");
});

I also tried;

$("#tableTemp").on('click', 'tr td span', function(){
   alert($(this).attr("id");
});

But to no avail, it seems I am not able to reach the specific DOM element that I am looking for... Accessing the name "span"+number doesn't resolve my issue,

Am I missing something,

Here's a view of the output DOM tree; I have removed the ending tags on the end, I think this would be enough...

<div id="divOrderContainer">
   <ul id="ulOrders">
      <li id="liAck"></li>
      <li id="liTemp">
          <div id="divViewOrderTitle">test</div>
          <div id="divViewOrderSpacer"></div>
          <div id="divTempItems">
            <li>
               <table id="tableTemp">
                  <tbody>
                     <tr>                         
                       <td> a </td>
                       <td> b </td>
                       <td> c </td>
                       <td> d </td>
                       <td><span id="span8">delete</span></td>
                     </tr>                         
                   </tbody>
                </table>

Who automagically created the "TBODY" element anyway?

Thanks..

Upvotes: 2

Views: 1161

Answers (2)

kevinli404
kevinli404

Reputation: 43

may be you can change this line:

'<td><span id="span'+posid+'">delete<span></td>' +

to 

'<td><span id="span'+posid+'" onclick='+'"delete(this)">delete<span></td>' +

and the function is

function delete(obj){
   alert($(obj).arrt('id'));
}

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

From your description of the problem it seems, from the Ajax part, that the table isn't present in the DOM at the point at which events are being bound, instead I'd suggest binding to the li element which is present in the DOM from DOMReady:

$('#divTempItems li').on('click', 'td', function(e){
    alert(this.id);
});

Note that your HTML is invalid (as pasted in the latter code block), as an li must appear in, and only in, a ul or ol element, and div elements cannot be direct children of either a ul or ol. Also duplicate ids are invalid, an id must be unique within the document.

The tbody is automatically created by most, if not all, browsers when rendering table elements. While the spec, as I recall, says that they're optional, browsers, it seems, disagree.

Upvotes: 2

Related Questions