toggle(函数)中的AJAX下拉菜单只工作一次

Question

我有一个表，其中动态添加了行。

在其中一个单元格中，我想在下拉框和输入框之间切换。

下拉列表是通过AJAX加载的PHP文件。问题是下拉列表只呈现一次。第一次单击切换按钮时，会显示下拉列表，这是应该的。第二次单击将其切换到输入字段，这是应该的。第三次点击什么都不做，它只是停留在输入框上，不会切换回下拉列表。

如果我注释掉AJAX调用并放入一个简单的下拉列表，它可以来回切换。所以我认为问题出在AJAX部分。

链接到http://jsfiddle.net/6h5BD/1/注意：AJAX目前在jsfiddle中被注释掉了，取而代之的是一个临时下拉列表，这样你就可以看到我想要的结果了。

JS中有问题的部分：

$('input[name="button"]').toggle(function() {
$.ajax({
url: 'http://localhost/brandDropdown.php',
type:'POST',
dataType: 'html',
success: function(output_string){
$('#brand').html(output_string);
} 
}); 
}, function() {
$(this).closest('td').prev().html("<input type="text" name="itemBrand[]" id="itemBrand" size="10" placeholder="New Brand" style="text-transform: uppercase"/>");
});

PHP：

$sqlbrand = "SELECT BRD_Name FROM Brands ORDER BY BRD_Name asc";
$resultbrand = odbc_exec($conn, $sqlbrand);
ECHO "<select name='itemBrand[]' style='width:120px' size='1'>";
while ($rowbrand = odbc_fetch_array($resultbrand)) {
echo "<option value='".$rowbrand['BRD_Name']."'>".$rowbrand['BRD_Name']."</option>";
}
echo "</select></td>";

我对以不同的方式处理这件事持开放态度。我尝试了几种不同的方法，但都无济于事。

提前感谢您在此问题上提供的任何帮助。

Answer 1

如果我看不到PHP文件，我就无法完全帮助您调试。

但是从HTML/JS中我可以看到一个潜在的问题。您正在选择$("#brand")并将html更改为output_string。但是，当您克隆行时，您正在使用#brand的id创建多个div，并且ids应该是唯一的，您应该使用class。

你能试试这个方法吗？

$('input[name="button"]').toggle(function() {
var $this = $(this);
$.ajax({
url: 'http://localhost/brandDropdown.php',
type:'POST',
dataType: 'html',
success: function(output_string){
$this.closest('td').prev().html(output_string);
} 
}); 
}, function() {
$(this).closest('td').prev().html("<input type="text" name="itemBrand[]" id="itemBrand" size="10" placeholder="New Brand" style="text-transform: uppercase"/>");
});

Answer 2

在您的代码中(在小提琴中)

$(this).closest('td').prev().html(...)

应该是

$(this).closest('td').prev().find('#brand').html(...)

因为$(this).closest('td').prev().html(...)正在替换td的html，这意味着它只是从td中删除id为#brand的div，所以在您的ajax成功回调中，$('#brand').html(output_string);不起作用，因为一旦切换它，它就不在td中。