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

时间:2013-06-15 08:57:26

标签: php jquery ajax

我有一个动态生成字段的表单,当我从组合框中选择一个值与组合框值相关联的值问题是我有一个jquery计算函数,它将从ajax生成的文本框中计算百分比。任何人可以帮助我这里是我的ajax文件

<?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>";
}
?>

这是我的jquery计算部分

$(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);
    });
});    

2 个答案:

答案 0 :(得分:0)

使用委托:

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

同样,您可以委派模糊事件

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

在html代码中为表提供一个id,以便可以对该表中添加的任何输入执行操作(some_table_id是我使用的虚拟ID)

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

答案 1 :(得分:0)

可能不会触发事件,因为它们是在#stperc位于DOM之前创建的。您可以将此绑定到document,如下所示:

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

由于您要将这些事件添加到同一元素,因此可以将它们排在一起。

我还将#stperc事件中的keyup更改为$(this)

以下是 jsFiddle

的演示

或者,您可以bind将这些事件发送给table的父级。您不能在此处使用table作为父级,因为<table>也是动态的。有关详细信息,请参阅 on()