JQuery .on only firing once on dynamically generated elements
<p>So I have the following problem.  I am trying to add a two events to a table of checkboxes.</p>

<p>Here's an example of the html.</p>

<pre><code>&lt;body&gt;
&lt;div id='container'&gt; //static element, everything beyond this element is dynamic
 &lt;div id='pane_x'&gt;
  &lt;div id='bottom_x'&gt;
   &lt;div id='bottom_left_x'&gt;
    &lt;div id='results_x'&gt;
     &lt;div id='list_x'&gt;
      &lt;div id='table_1'&gt;
       &lt;table&gt;
        &lt;tbody&gt;
         &lt;tr&gt;
          &lt;td&gt;
           &lt;input type='checkbox' name='blah' id='blah_obj.id_x' class='blahblah'&gt;
          &lt;/td&gt;
         &lt;/tr&gt;
        &lt;/tbody&gt;
       &lt;/table&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I am trying to select the checkboxes only hopefully by using a prefix selector [id^='blah_'].  I am able to get the code working for the first pane ie: pane_0, but it doesn't fire on pane_1 or beyond.</p>

<pre><code>jquery(document).on("change", "[id^='blah_" + obj.id + "']", function() {
//code here
});
</code></pre>

<p>There may be nesting errors as I just made an approximate estimate of the html.  The weird thing is I can see them by using a daisy chained .children() statement, but I can't select the input elements.</p>

<p>Since the comments don't support the same code blocks as this section I'll just add it here:</p>

<pre><code>jquery(document).on("change", ".checked", function() {
 var ids = jquery(this).attr("id").split("_");
 if (ids[0] === "blah")
  //do code
 }
});
</code></pre>

<p>edited the id for clarity.  The id structure is "blah_" obj.id "_" individual iterator.  So 3 checkboxes on pane 0 would look like this:
blah_0_0
blah_0_1
blah_0_2</p>

<p>there are 2 other sets of checkbox lists on this page that I do not want to target with these functions, that is why i'm using the prefix selector.</p>
