如何通过ajax对动态生成的文本框执行jquery计算

Question

hi i have a form which dynamically generates fields when i select a value from a combo box with the value associated with the combo box value the problem is i have a jquery calculation function too which will calculate percentage from the textbox generated by ajax. can any one help me in this here is my ajax file

<?php
session_start();
require("includes/dbconnect.php");
require("includes/function.php");
$zdb = $_SESSION["zdbyear"];
mysql_select_db($zdb);
$code = $_GET["code"];
$ztit = $_SESSION["tit"];
//browse($code);
$result = mysql_query("SELECT * FROM `loctype` WHERE code='".$code."'") or die(mysql_error());
require("includes/dbconnect.php");
$getcomp = mysql_query("SELECT * FROM `compyear` WHERE finyear='".$ztit."'") or die(mysql_error());
$st = mysql_fetch_array($getcomp);

  $row = mysql_fetch_array($result);
  echo "<table border='1'>";
  echo "<tr>";
  echo '<td align="left"> <font color="green"><b>Deposit</b></font> <input type="text" size="20"  maxlength="40" name="deposit" value="'.$row["deposit"].'" class="qty form-input-rate" text-align:left ;  /></td>';
  echo '<td align="right"> <font color="red"><b>Rent</b></font> <input type="text" id="rent" size="20" maxlength="40" name="rent" value="'.$row["rent"].'" class="form-input-rate"  /></td>';
  echo '<td align="right"> <font color="#D2691E"><b>S.T</b></font> <input type="text" id="stperc" size="5"  maxlength="40" name="servtax" style="width: 50px;" value="'.$st["stperc"].'" class="form-input-rate" text-align:left ;  />%</td>';      
  echo '</tr>';
  echo '<tr>';
    echo '<td align="right"> <font color="green"><b>S.T</b></font> <input type="text" size="20"  maxlength="40" id="stamt" name="stamt" value="" class="form-input-rate" text-align:left ;  /></td>';
    echo '<td align="right"> <font color="red"><b>Amount</b></font><input type="text" size="20" maxlength="40" id="totamt" name="totamt" value="" class="form-input-rate"  readonly/></td>';

  echo '<tr>';
  echo "</table>";
}
?>

here is my jquery calculation part

$(document).ready(function () {
    $("#stperc").keyup(function () {
        alert($("#stperc").val());
        var value = $("#stperc").val();
        var value2 = $("#rent").val();
        $('#stamt').val((value * value2) / 100).toFixed(2);
    });
    $("#stperc").blur(function () {
        var val = parseInt($("#rent").val());
        $('#totamt').val(val + Number($("#stamt").val())).toFixed(2);
    });
});    

Answer 1

Use delegation:

$("#some_table_id").on('keyup', '#stperc', function(){
  // do it here
});

Similarly you can delegate blur event

$("#some_table_id").on('blur', '#stperc', function(){
  // do it here
});

Give an id to the table in your html code so that the action can be executed on any inputs added in that table (some_table_id is the dummy id I use)

echo "<table border='1' id='some_table_id'>";