在 jquery/ajax 中克隆搜索字段

Posted 2023-05-08

【中文标题】在 jquery/ajax 中克隆搜索字段

【英文标题】：Clone search fields in jquery/ajax

【发布时间】：2022-01-07 10:03:24

【问题描述】：

我是这个论坛的新手，我想告诉你我的问题。

我需要一个多搜索字段，当我输入第一个字母时，我通过对 php 中的文件进行的 AJAX 调用获得结果，问题是在我克隆 AJAX 扫描的第二个输入字段中不工作，我不建议出来。 那么如何才能让多个搜索字段工作呢？

我附上代码是为了让您更好地理解。谢谢大家。

<div class="cont">
      <input type="text" class="form-control search" id="search">
      <button id="add" onClick="add()">+</button>
  </div>
    
<table class="table table-hover">  
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>City</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody id="output">
    
  </tbody>
</table>



function add()
    $("#search").clone().val("").attr("id", "search").appendTo(".cont");
   

$("#search").keyup(function()
    $.ajax(
        type:'POST',
        url:'search.php',
        data:
          name:$(this).val(),
        ,
        success:function(data)
           $(".#output").html(data);
        return data;
        
    );
);

我按照你说的做了，但是第二个输入中的ajax调用不起作用，我应该调用ajax函数使其在新输入上起作用吗？我该怎么办？

非常感谢大家，我解决了

【问题讨论】：

通过查看您的代码，您似乎有 2 个输入具有相同的 id search 这是无效的 HTML，您只能有 1 个具有特定 id 的元素。这里有一个资源供您阅读：https://www.w3.org/TR/WCAG20-TECHS/H93.html

您不能有多个具有相同 ID 的按钮。根据定义，ID 必须是唯一的。改用类来绑定您的事件。另请参阅 jQuery 中使用 .on() 的委托事件，因为动态生成的元素需要它。

【参考方案1】：

您需要确定一个 class 搜索。您正在调用一个应该是唯一

的

ID

克隆时删除ID属性并使用addClass('search')

$("#search").clone().val("").addClass("search").appendTo(".cont");

然后将您的选择器更改为：$("#search")

致$(".search")

实际上使用 class 在 keyup 上搜索调用任何元素

更新

正如评论中提到的@ADyson .. 您将需要bind keyup 操作.. 最简单的方法是使用on()（来自已弃用的.live()）。即：

$(document).on('keyup', '.search', function()

完整片段：

function add()
    $("#search").clone().val("").addClass("search").appendTo(".cont");
   

$(document).on('keyup', '.search', function()
    alert('Call AJAX');
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cont">
      <input type="text" class="form-control search" id="search">
      <button id="add" onClick="add()">+</button>
  </div>
    
<table class="table table-hover">  
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>City</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody id="output">
    
  </tbody>
</table>

查看API Documentation 了解通过.on() 处理的事件的完整列表

【讨论】：

这是第 1 步。第 2 步是实现委托事件，因此事件处理程序将绑定到在声明处理程序后添加到页面的元素。

@ADyson -- 非常正确.. 我更新了我的答案以反映这一点。