从动态创建的对象中获取文本值

Question

I'm still searching solution for getting values from dynamic created object.

Follwing code generates dynamic object from zip2.php

$(document).ready(function() { 
    $("#submit").click(function(e) {
      e.preventDefault();

      var q = $("#k").val();

      $.ajax({
          type: "POST",
          url: "zips.php",
          data: "q="+ q,
          dataType: "html",
          success: function(res) {
               $("#result").html(res); $('#result').trigger('create');  
        },
      });

    });       

});

<div data-role="content">

 <div id="result"></div>

</div>

It created object like this format.(contents of zips.php)

<? echo " <div><ul id='zips' data-role='listview' data-inset='true' data-theme='c'>";
while($row = mysql_fetch_array($result)) {
$out .= "
 <li>
 <a name='submit_button' href='#mainPage'><span class='zip1'>$zip1</span>-
 <span class='zip2'>$zip2</span><br />
 <span class='address'>$row[zp_sido] $row[zp_gugun] $row[zp_dong] $row[zp_bunji]   </span></a>
</li> 
";
}
  echo $out."</ul>";

?>

And this script get the text() value from dynamic object and insert it to form.

   <script>
$(document).ready(function() {
$('a[name=submit_button]').click(function(){
                                         var inputVal1 = $('.zip1, this).text(); 
 var inputVal2 = $('.zip2', this).text(); 
 var inputVal3 = $('.address', this).text();


     $('div input[name=zip_code1]').val(inputVal1);  
$('div input[name=zip_code2]').val(inputVal2); 
$('div input[name=address1]').val(inputVal3); 

   </script>

   <div>
    <form>
      <input type="text" id='zip_code1' name="zip_code1" > - <input type="text" id='zip_code2 name="zip_code2"><br />
      <input type="text" id='address1' name="address1">
    </form
   </div>

The problem is that "var inputVal1 = $('.zip1, this).text();" gets null from dynamic objects class name "zip1".

Answer 1

Instead of

$('a[name=submit_button]').click(function(){..

use this:

$('#result').on('click', 'a[name=submit_button]', function(){..

As you a[name=submit_button] append to DOM after page load, dynamically via ajax request, so you need delegate event handler to that, ordinary event binding will not work here.

Read more about .on()

---

Note

For general binding syntax of .on() is like:

$(target).on(eventName, handlerFunction)

but for delegate event systax is

$(container).on(eventName, target, handlerFunction)

Here container is the Static-element that belongs to DOM at page load and contains target and both container and target are valid jQuery selector.