Javascript 切换（函数）中的AJAX下拉菜单只工作一次

我有一个动态添加行的表

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

下拉列表是通过AJAX加载的PHP文件。问题是下拉列表只渲染一次。 第一次单击“切换”按钮时，将显示下拉列表，它应该是这样的。 第二次单击会将其切换到输入字段，这是应该的。 第三次单击不起任何作用，它只是停留在输入框上，不会切换回下拉列表

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

链接到 注意：AJAX目前在JSFIDLE中被注释掉，并替换为临时下拉列表，这样您就可以看到我想要的结果

有关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>";

我非常愿意以不同的方式处理这件事。我试过几种不同的方法，但都没有用

---

感谢您在advanced中对此问题提供的任何帮助。

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

但是从HTML/JS中我可以看到一个潜在的问题。您正在选择$brand并将html更改为输出字符串。但是，当您克隆行时，您正在创建id为brand的多个div，并且id应该是唯一的，您应该使用类

你能试试这个吗

$('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\"/>");
 });

---

在你的代码中的小提琴

$(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'.htmloutput_字符串中；无法工作，因为切换后它不在td内。

我在使用带回调的切换时遇到问题。也许您可以禁用输入，显示微调器或某种反馈，发出AJAX请求，然后更新输入？很好。我已经更改了$this.closest'td.prev.htmloutput_string；在我的网站上，我只是没有用正确的代码更新JSFIDLE，对不起。实际上这就是解决方案。我没有做的是创建变量var$this=$this；非常感谢你！你所说的对我来说是有意义的，但奇怪的是，当我测试它时，它不起作用$这个.最近的'td'。prev.html。。。不过效果很好。@user1816960，很高兴知道它已经解决了，但对我来说这听起来也很奇怪：-@user1816960，以防万一你需要一个例子。