jQuery: Blur function is not calling on each dynamically added row : <p>I am newbie to jQuery.I am trying to call the Blur function on each dynamically Added row and send the values of each row of both text box to PHP.<br>For first row, it works but dynamically added rows, its not working.<br>
My Code is as follows:<br>
   HTML and Jquery:</p>

<pre><code> &lt;!doctype HTML&gt;
    &lt;html&gt;
    &lt;head&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;script type="text/javascript"&gt;
    var rowCount = 1;
    function addMoreRows(frm) {
    rowCount ++;
    var recRow = '&lt;p id="rowCount'+rowCount+'"&gt;&lt;tr&gt;&lt;td&gt;&lt;input name="" type="text" id="co_name" size="17%"  maxlength="120" /&gt;&lt;/td&gt;&lt;td&gt;&lt;input name="" type="text"  id="co_qty" maxlength="120" style="margin: 4px 5px 0 5px;"/&gt;&lt;/td&gt;&lt;/tr&gt; &lt;a href="javascript:void(0);" onclick="removeRow('+rowCount+');"&gt;Delete&lt;/a&gt;&lt;/p&gt;';
    jQuery('#addedRows').append(recRow);
    }

    function removeRow(removeNum) {
    jQuery('#rowCount'+removeNum).remove();
    }
    &lt;/script&gt;
    &lt;body&gt;
    &lt;table rules="all" style="background:#fff;"&gt;
    &lt;tr&gt;
    &lt;td style="font-size:14px;" &gt;Name&lt;/td&gt;
    &lt;td style="font-size:14px;" &gt;Email&lt;/td&gt;

    &lt;td&gt;&lt;span style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;" onclick="addMoreRows(this.form);"&gt;
    Add More
    &lt;/span&gt;
    &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr id="rowId"&gt;
    &lt;td&gt;&lt;input name="" type="text"  id="co_name" value="" size="17%"/&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input name="" type="text" id="co_qty" value="" /&gt;&lt;/td&gt;

    &lt;/table&gt;
    &lt;div id="addedRows"&gt;&lt;/div&gt;
    &lt;/td&gt;
    &lt;/tr&gt;
    &lt;script&gt;
    $(document).ready(function(){
        $('#co_qty').on('blur',function () {
    var username = $('#co_name').val(); 
     var password = $('#co_qty').val(); 
    $.ajax({
             type: "POST",
             url: "blur.php",
             data: {'title':username ,'title1':password},
             success: function(msg) {
      alert(msg)             }

    }); 
     });
    });

    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;&lt;br&gt;
</code></pre>

<p>blur.php</p>

<pre><code>$var=$_POST['title'];
$var1=$_POST['title1'];
echo $var."Success!".$var1;
</code></pre>

<p><br>
I am not getting it. Please do suggest me.Thanks in advance.</p>
