如何通过从ajax文件生成的按钮调用jquery单击函数
hi i have a form which appends a table when a user inputs a value for eg. if a user inputs '1' then the values related to '1' will be appended on a table and the table will be appended on my page but i am even calling a function of jquery which will append a table row when add button is pressed but the function is not working is it because i am generating the button by ajax???? can anyone help me in this
here is my script to generate a new row
$(document).ready(function() {
var currentItem = $('#items').val();
$('#addnew').click(function() {
var strToAdd = '<tr><td align="center"><input type="text" size="6" maxlength="6" id="ord_' + currentItem + '" maxlength="6" name="ord_' + currentItem + '" class="form-input-oth" onkeyup="return copy(this.val());"/></td>
\
<td align="center"><input type="text" size="6" maxlength="6" id="srno' + currentItem + '" maxlength="6" name="srno_' + currentItem + '" class="form-input-oth"/></td>
\
<td align="center"><textarea name="descrip_' + currentItem + '" id="descrip_' + currentItem + '" cols="70" class="form-input-textarea"></textarea></td>
\
<td align="center"><input type="text" size="6" maxlength="9" id="unit_' + currentItem + '" maxlength="6" name="unit_' + currentItem + '" class="form-input-rate"/></td>
\
<td align="center"><input type="text" size="6" maxlength="9" id="rate_' + currentItem + '" maxlength="6" name="rate_' + currentItem + '" class="form-input-rate"/></td></tr>';
$('#data').append(strToAdd);
currentItem++;
$('#items').val(currentItem);
});
});
here is my textbox from which i am calling the ajax function
<input type="text" size="6" maxlength="6" id="code" maxlength="6" name="quotno" value="<?php echo ($addflag == 0) ? $get['quotno'] : ""; ?>" class="form-input-code" onblur="showyear('boqsrch.php?code='+this.value);"/>
here is my file from which the table is generated
<?php
require("includes/dbconnect.php");
include ('includes/function.php');
$code = trim($_GET["code"]);
$result = mysql_query("SELECT * FROM quotdtl WHERE vouchno='$code'") or die(mysql_error());
if (mysql_num_rows($result) > 0) {
echo '<div style="margin-left: 400px; margin-right: auto; width:180px;">
<h2><font color="#0099FF" face="Times New Roman">Bill Of Quotation</font></h2>
</div>
<hr/>
';
echo "<table border=\"1px\" width=\"80%\" id=\"data\" align=\"center\">";
;?>
<tr>
<td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">Order</font><span></span></label></td>
<td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">Sr No.</font><span></span></label></td>
<td width="580px" align="center"><label for=""><font color="#0099FF" size="3px">Description</font><span></span></label></td>
<td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">Unit</font><span></span></label></td>
<td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">Rate</font><span></span></label></td>
</tr>
<?php
$ctr = 0;
while ($row = mysql_fetch_array($result)) {
echo "<tr>";
echo "<td align=\"center\"><input type=\"text\" size=\"6\" maxlength=\"6\" id=\"ord_$ctr\" maxlength=\"6\" name=\"ord_$ctr\" value=\"$row[orderby]\" class=\"form-input-oth\" onkeyup=\"document.getElementById('ord_$ctr').value = this.value;\"/></td>";
echo "<td align=\"center\"><input type=\"h\" size=\"6\" maxlength=\"6\" id=\"srno_$ctr\" maxlength=\"6\" name=\"srno_$ctr\" value=\"$row[srno]\" class=\"form-input-oth\" onkeyup=\"document.getElementById('srno_$ctr').value = this.value;\"/></td>";
echo "<td align=\"center\"><textarea name=\"descrip_$ctr\" cols=\"70\" class=\"form-input-textarea\" onkeyup=\"document.getElementById('descrip_$ctr').value = this.value;\">$row[descrip]</textarea></td>";
echo "<td align=\"center\"><input type=\"text\" size=\"6\" maxlength=\"9\" id=\"unit_$ctr\" maxlength=\"6\" name=\"unit_$ctr\" value=\"$row[unit]\" class=\"form-input-rate\" onkeyup=\"document.getElementById('unit_$ctr').value = this.value;\"/></td> ";
echo "<td align=\"center\"><input type=\"text\" size=\"6\" maxlength=\"9\" id=\"rate_$ctr\" maxlength=\"6\" name=\"rate_$ctr\" value=\"$row[rate]\" class=\"form-input-rate\" onkeyup=\"document.getElementById('rate_$ctr').value = this.value;\"/></td>";
echo "</tr>";
$ctr++;
}
echo '</table>';
} else {
?>
<div style="margin-left: 400px; margin-right: auto; width:180px;">
<h2><font color="#0099FF" face="Times New Roman">Bill Of Quotation</font></h2>
</div>
<hr/>
<table border="1px" width="80%" id="data" align="center">
<tr>
<td><br /></td>
</tr>
<tr>
<td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">Order</font><span></span></label></td>
<td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">Sr No.</font><span></span></label></td>
<td width="580px" align="center"><label for=""><font color="#0099FF" size="3px">Description</font><span></span></label></td>
<td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">Unit</font><span></span></label></td>
<td width="130px" align="center"><label for=""><font color="#0099FF" size="3px">Rate</font><span></span></label></td>
</tr>
<tr>
<td align="center"><input type="text" size="6" maxlength="6" id="ord_0" maxlength="6" name="ord_0" value="" class="form-input-oth" onkeyup="document.getElementById('ord_0').value = this.value;"/></td>
<td align="center"><input type="text" size="6" maxlength="6" id="srno_0" maxlength="6" name="srno_0" value="" class="form-input-oth" onkeyup="document.getElementById('srno_0').value = this.value;" /></td>
<td align="center"><textarea name="descrip_0" cols="20" class="form-input-textarea" onkeyup="document.getElementById('descrip_0').value = this.value;"></textarea></td>
<td align="center"><input type="text" size="6" maxlength="9" id="unit_0" maxlength="6" name="unit_0" value="" class="form-input-rate" onkeyup="document.getElementById('unit_0').value = this.value;" /></td>
<td align="center"><input type="text" size="6" maxlength="9" id="rate_0" maxlength="6" name="rate_0" value="" class="form-input-rate" onkeyup="document.getElementById('rate_0').value = this.value;" /></td>
</tr>
<tr>
<td align="center"><input type="text" size="6" maxlength="6" id="code" maxlength="6" name="ord_1" value="" class="form-input-oth" onkeyup="document.getElementById('ord_1').value = this.value;" /></td>
<td align="center"><input type="text" size="6" maxlength="6" id="code" maxlength="6" name="srno_1" value="" class="form-input-oth" onkeyup="document.getElementById('srno_1').value = this.value;" /></td>
<td align="center"><textarea name="descrip_1" cols="20" class="form-input-textarea" onkeyup="document.getElementById('descrip_1').value = this.value;"></textarea></td>
<td align="center"><input type="text" size="6" maxlength="9" id="code" maxlength="6" name="unit_1" value="" class="form-input-rate" onkeyup="document.getElementById('unit_1').value = this.value;" /></td>
<td align="center"><input type="text" size="6" maxlength="9" id="code" maxlength="6" name="rate_1" value="" class="form-input-rate" onkeyup="document.getElementById('rate_1').value = this.value;" /></td>
</tr>
<tr>
<td align="center"><input type="text" size="6" maxlength="6" id="code" maxlength="6" name="ord_2" value="" class="form-input-oth" onkeyup="document.getElementById('ord_2').value = this.value;" /></td>
<td align="center"><input type="text" size="6" maxlength="6" id="code" maxlength="6" name="srno_2" value="" class="form-input-oth" onkeyup="document.getElementById('srno_2').value = this.value;" /></td>
<td align="center"><textarea name="descrip_2" cols="20" class="form-input-textarea" onkeyup="document.getElementById('descrip_2').value = this.value;"/></textarea></td>
<td align="center"><input type="text" size="6" maxlength="9" id="code" maxlength="6" name="unit_2" value="" class="form-input-rate" onkeyup="document.getElementById('unit_2').value = this.value;" /></td>
<td align="center"><input type="text" size="6" maxlength="9" id="code" maxlength="6" name="rate_2" value="" class="form-input-rate" onkeyup="document.getElementById('rate_2').value = this.value;" /></td>
</tr>
<tr>
<td align="center"><input type="text" size="6" maxlength="6" id="code" maxlength="6" name="ord_3" value="" class="form-input-oth" onkeyup="document.getElementById('ord_3').value = this.value;"/></td>
<td align="center"><input type="text" size="6" maxlength="6" id="code" maxlength="6" name="srno_3" value="" class="form-input-oth" onkeyup="document.getElementById('srno_3').value = this.value;" /></td>
<td align="center"><textarea name="descrip_3" cols="20" class="form-input-textarea" onkeyup="document.getElementById('descrip_3').value = this.value;"></textarea></td>
<td align="center"><input type="text" size="6" maxlength="9" id="code" maxlength="6" name="unit_3" value="" class="form-input-rate" onkeyup="document.getElementById('unit_3').value = this.value;"/></td>
<td align="center"><input type="text" size="6" maxlength="9" id="code" maxlength="6" name="rate_3" value="" class="form-input-rate" onkeyup="document.getElementById('rate_3').value = this.value;"/></td>
</tr>
<tr>
<td align="center"><input type="text" size="6" maxlength="6" id="code" maxlength="6" name="ord_4" value="" class="form-input-oth" onkeyup="document.getElementById('ord_4').value = this.value;"/></td>
<td align="center"><input type="text" size="6" maxlength="6" id="code" maxlength="6" name="srno_4" value="" class="form-input-oth" onkeyup="document.getElementById('srno_4').value = this.value;" /></td>
<td align="center"><textarea name="descrip_4" cols="20" class="form-input-textarea" onkeyup="document.getElementById('descrip_4').value = this.value;"></textarea></td>
<td align="center"><input type="text" size="6" maxlength="9" id="code" maxlength="6" name="unit_4" value="" class="form-input-rate" onkeyup="document.getElementById('unit_4').value = this.value;"/></td>
<td align="center"><input type="text" size="6" maxlength="9" id="code" maxlength="6" name="rate_4" value="" class="form-input-rate" onkeyup="document.getElementById('rate_4').value = this.value;" /></td>
</tr>
<tr>
<td align="center"><input type="text" size="6" maxlength="6" id="code" maxlength="6" name="ord_5" value="" class="form-input-oth" onkeyup="document.getElementById('ord_5').value = this.value;"/></td>
<td align="center"><input type="text" size="6" maxlength="6" id="code" maxlength="6" name="srno_5" value="" class="form-input-oth" onkeyup="document.getElementById('srno_5').value = this.value;" /></td>
<td align="center"><textarea name="descrip_5" cols="20" class="form-input-textarea" onkeyup="document.getElementById('descrip_5').value = this.value;"></textarea></td>
<td align="center"><input type="text" size="6" maxlength="9" id="code" maxlength="6" name="unit_5" value="" class="form-input-rate" onkeyup="document.getElementById('unit_5').value = this.value;"/></td>
<td align="center"><input type="text" size="6" maxlength="9" id="code" maxlength="6" name="rate_5" value="" class="form-input-rate" onkeyup="document.getElementById('rate_5').value = this.value;"/></td>
</tr>
<tr>
<td align="center"><input type="text" size="6" maxlength="6" id="code" maxlength="6" name="ord_6" value="" class="form-input-oth" onkeyup="document.getElementById('ord_6').value = this.value;"/></td>
<td align="center"><input type="text" size="6" maxlength="6" id="code" maxlength="6" name="srno_6" value="" class="form-input-oth" onkeyup="document.getElementById('srno_6').value = this.value;"/></td>
<td align="center"><textarea name="descrip_6" cols="20" class="form-input-textarea" onkeyup="document.getElementById('descrip_6').value = this.value;"></textarea></td>
<td align="center"><input type="text" size="6" maxlength="9" id="code" maxlength="6" name="unit_6" value="" class="form-input-rate" onkeyup="document.getElementById('unit_6').value = this.value;" /></td>
<td align="center"><input type="text" size="6" maxlength="9" id="code" maxlength="6" name="rate_6" value="" class="form-input-rate" onkeyup="document.getElementById('rate_6').value = this.value;" /></td>
</tr>
<?php }?>
</table>
<input type="button" id="addnew" class="addnew" class="classname" name="addnew" value="+" />
<input type="hidden" id="items" name="items" value="7" />
You should use the following:
// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#container').on('click', '#inputButtonID', function(event) {
event.preventDefault();
alert('testlink');
});
This will attach your event to any input within the #container
element,
reducing the scope of having to check the whole document
element tree and increasing efficiency.
More info here:
Try binding the click event using on
instead of click
http://api.jquery.com/on/
This will allow the behavior to work on any event matching the selector even ones that came to be after the binding takes place.