jQuery,在新创建的元素上触发更改事件
我在表单中有一个按钮,单击该按钮可添加另一组表单字段,在这些表单字段中有两个下拉列表,其中第二个下拉列表的内容取决于第一个下拉列表中选择的内容 我想做的是,单击new form field(新建表单字段)按钮以添加新项目,然后在创建的下拉列表上触发更改事件,因此只有该下拉列表会更改,而不是该表单中当前具有相同名称的所有下拉列表。第一个下拉列表称为“产品类别” addFormField函数的代码为:jQuery,在新创建的元素上触发更改事件,jquery,ajax,triggers,Jquery,Ajax,Triggers,我在表单中有一个按钮,单击该按钮可添加另一组表单字段,在这些表单字段中有两个下拉列表,其中第二个下拉列表的内容取决于第一个下拉列表中选择的内容 我想做的是,单击new form field(新建表单字段)按钮以添加新项目,然后在创建的下拉列表上触发更改事件,因此只有该下拉列表会更改,而不是该表单中当前具有相同名称的所有下拉列表。第一个下拉列表称为“产品类别” addFormField函数的代码为: function addFormField() { var id = document.getEl
function addFormField() {
var id = document.getElementById("field_id").value;
$("#products").append("<table width='600' cellpadding='5' cellspacing='0' class='Add_Products' id='row" + id + "'><td width='250' class='left'><label>Select Product Category</label></td><td class='right' ><label><select name='" + id + "' id='ProductCategory'><?php foreach($categories as $key=>$category){ echo "<option value=".$key.">".$category."</option>"; } ?></select></label></td></tr><tr><td width='250' class='left'><label>Select Product Template</label></td><td class='right' ><label><select name='data[QuoteItem][" + id + "][product_id]' id='QuoteItem" + id + "product_id' class='Product' title='" + id + "'></select></label></td></tr><tr ><td class='left'>Name</td><td class='right'><label><input name='data[QuoteItem][" + id + "][name]' type='text' id='QuoteItem" + id + "name' size='50' /></label></td></tr><tr ><td class='left'>Price (ex GST)</td><td class='right'><input type='text' name='data[QuoteItem][" + id + "][price]' id='QuoteItem" + id + "price' onchange='totalProductPrice();' class='quote-item-price' value='0' /></td></tr><tr><td class='left'>Description</td><td class='right'><label><textarea name='data[QuoteItem][" + id + "][description]' cols='38' rows='5' id='QuoteItem" + id + "description'></textarea></label></td></tr><tr><td><a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a></td></tr></table>");
$('#row' + id).highlightFade({
speed:1000
});
id = (id - 1) + 2;
document.getElementById("field_id").value = id;
}
检测ProductCategory下拉列表中的更改并触发AJAX的代码如下:
$("select#ProductCategory").live('change', function(){
var url = base + "/quotes/productList/" + $(this).val() + "";
var id = $(this).attr('name');
$.getJSON(url,{id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
options += '<option value="0">None</option>';
$.each(j, function(key, value){
options += '<option value="' + key + '">' + value + '</option>';
})
$("select#QuoteItem" + id + "product_id").html(options);
})
}).trigger('change');
我整个下午都在努力解决这个问题,最近的一次我将返回的ajax值应用于所有项目。目前,使用live功能的用户可以添加新字段,并且可以独立使用下拉列表,但只有在首次添加字段时,我才难以获取该字段
提前感谢您提供的任何帮助我假设您已将更改事件附加到select.Product,并需要在将潜在值推入该产品后触发它?尝试调整AJAX回调,如下所示:
function(j){
var options = '';
options += '<option value="0">None</option>';
$.each(j, function(key, value){
options += '<option value="' + key + '">' + value + '</option>';
}
// setup options and trigger change event.
$("select#QuoteItem" + id + "product_id").html(options).trigger('change');
)