Question

It seems JQuery has some magic/nuances for using .find method for input element or some sophisticated descendants (or I am blind).
This is my JS code:

<div id="edit_lists_div">
  <div style="width: 100%; margin-bottom:5px">&nbsp;
  <button value="" style="display: none;" id="edit_lists_div_btn1">Btn1</button>
  <button value="" style="display: none;" id="edit_lists_div_btn2"
  disabled="disabled">Btn2</button>
  <button value="" style="display: none;" id="edit_lists_div_btn3"
  disabled="disabled">Btn3</button>
  </div>
  <div style="width: 100%; height: 210px; overflow: auto;">
  <table class="my_grid" id="edit_lists_div_table">
      <thead>
      <tr>
          <th width="30"></th>
          <th style="display: none;">id</th>
          <th width="100">Title</th>
          <th width="25">Some field 1</th>
          <th style="display: none;">some_property</th>
          <th>Some field 2</th>
      </tr>
      </thead>
      <caption>Lists</caption>
      <tbody>
      <tr>
          <td property_name="">
          <input row_selector="true" type="checkbox">
          </td>
          <td style="display: none;" property_value="157" property_name="id">157</td>
          <td property_value="List1" property_name="title">List1</td>
          <td property_value="4" property_name="subscribers_count">4</td>
          <td style="display: none;" property_value="9867,9869,9871,9868"
          property_name="subscribers">9867,9869,9871,9868</td>
          <td property_value="New" property_name="status">New</td>
      </tr>
      </tbody>
  </table>
  </div>

All I want to get the input field

<input row_selector="true" type="checkbox">

and manage it somehow. But .find can not find it! Here is what I do:

var tmp = $("#edit_lists_div").find("tbody");
var div_inputs = tmp.find("input"); // it is empty!

What is the problem here?

UPDATE 1: Note, the solution is still not found here. I’ve choosed already correct answer but unselected it because it became not workable in my app context. I mean this answer:

var tmp = $("#edit_lists_div").find("tbody");    
var div_inputs = $('input[type="checkbox"]', '#edit_lists_div');

was workable just for the FIRST Firebug debugging. Than I had empty/not_found JQuery object again.

The same story is for this code:

var tmp = $("#edit_lists_div").find("tbody");    
var div_inputs = $('input', '#edit_lists_div');

for the first single time it worked. But was broken after second try. What a mysticism here?!

UPDATE 2: As for possible problem at my handler… it’s not! I’ve checked this code for this case:

$.ajax({
url : getUrl(),
dataType : "json",
success : function(data) {
   // my code goes here and still can't get input element!
  }
});

UPDATE 3: If it matter what for I need these inputs:

div_inputs.each(function() {
// some business logic with found inputs goes here
});

Answer 1

OK, the solution is found. It was not in JQuery. It was in my app architecture. I had async $.ajax invocation before my JS code. On success function it created my table but as you understand I’ve tried to access this table elements before success method processing so before they were created!

Hope it will help some one. Beware of AJAX!