我正在使用jQuery数据表插件,它有一个事件,单击按钮我们可以在表中添加新行。
jQuery代码如下:
$(document).ready(function() {
var t = $('#example').DataTable();
var counter = 1;
$('#addRow').on( 'click', function () {
t.row.add( [
counter,
'<select id="k'+counter+'" name="itemname'+counter+'" ><option>-------</option></select>' ,
'<input id="itemrate" name="itemqty'+counter+'" placeholder="Quantity" type="text">',
'<input id="itemrate" name="itemrate'+counter+'" placeholder="Rate" type="text">',
'<input id="totalamt" name="totalamt'+counter+'" placeholder="Total Amount" type="text">'
] ).draw();
counter++;
});
});
我想使用 jQuery .ajax()
填充从 MySQL 数据库获取的数据,我的代码如下:
jQuery(document).ready(function(){
jQuery('#k'+counter).click(function(){
jQuery.ajax({
url: 'getData.php',
type:'POST',
data:'form_data='+val,
success:function(results){
jQuery('#k'+counter).html(results);
}
});
});
});
getdata.php 的代码如下:
<?php
mysql_connect('localhost','root','');
mysql_select_db('eroyalsum');
$sql = "SELECT ITEMCODE,ITEMNAME FROM itemmaster1";
$result = mysql_query($sql);
while($row = mysql_fetch_row($result))
{
echo '<option value="'.$row[0].'" >'.$row[1].'</option>';
}
?>
最后,我的问题是当我将其编写为单独的函数时,它只工作一次。当我添加另一行时,它不起作用,当我在一个函数中编写 jQuery 的.ajax()
时,它不起作用......
尝试将选择器从:
jQuery('#k'+counter).click(function(){
…
自
jQuery(document).on("change", "select[id^='k']", function(){
...
问题是事件绑定。
将事件绑定到 #k 元素时,新项不会自动将事件绑定到它。
你可以使用这样的东西:
$('body').on('click','.new_elements',function(){ //dostuff});
您可以在此处阅读更多相关信息
动态创建的元素上的事件绑定?