Question

我正在使用从数据库中搜索字符串并选择附加到文本框的字符串

我可以从数据库中获取搜索结果，我可以将结果附加到文本框下面。

但我的问题是特定的结果，我无法获得附加结果的“id”

我的代码看起来像这样..

<span id="new">
    <input id="addSearch" type="text" width="50px"/>
</span>

<div id="append" style="margin-top: -11px;width: 149px;"></div>

<script type="text/javascript">

$(function(){      
  $("#addSearch").keyup(function() {    
    var v = $('#addSearch').val();
    $.getJSON('http://localhost/api/getresult/?q='+v, function(data){
      $('#append').html('');
        $.each(data, function (key,value){
           $('<div  id='+value["id"]+' class="searchResult">  
                   '+value["name"]+' 
                 </div>').appendTo($('#append'));
         });
     });    
  });    
});
$('.searchResult').click(function(){
  alert($(this).attr("id"));
});

Answer 1

您的密钥启动方法是正确的，您只需修改点击事件，如下所示：

$(document).on('click', '.searchResult', function(e) {
    alert($(this).attr('id'));
});

Answer 2

正如Adarsh Raj所说，你没有绑定你在AJAX回调中附加的click元素的.searchResult处理程序。 jQuery集合不是“实时”的，因此，事件处理程序在调用时直接绑定在匹配的DOM元素上。

但是，不应手动将处理程序绑定到每个插入的元素，而应在父元素上使用delegated event handler：

$('#append').on('click', '.searchResult', function(){ alert($(this).attr("id")); });

这要求在调用时#append元素位于DOM中，但稍后插入的任何.searchResult元素都将能够通过事件传播触发事件处理程序。另一个优点是只有一个事件处理程序处理所有 .searchResult元素的click事件，而不是为每个元素都有一个事件处理程序。

Answer 3

尝试

var a = $('<div  id='+value["id"]+' class="searchResult"> '+value["name"]+' </div>');
$('#append').append(a);

instead of your approach below
var a = $('<div  id='+value["id"]+' class="searchResult">  
                       '+value["name"]+' </div>').appendTo($('#append'));

Answer 4

你不需要var a

$(stuff).appendTo(selector)没问题。

虽然这不是解决方案，但只是一个观察。

因此，假设您从后端得到的响应给出了如下所示的JSON： { id: 123, name: "name" }

你在函数中的迭代 $.each(data, function(k,v) {

v本身具有所需的值。 value["id"]错误，并尝试访问密钥的属性id。因此，您不需要对JSON进行迭代，只要知道它们是什么就可以访问它的属性。

试试这个：

$('<div id=' + data["id"] + 'class="searchResult">' + data["name"] + ...

Answer 5

你正试图在元素到达dom之前绑定click函数。所以在你的循环中绑定事件

$(function(){      
  $("#addSearch").keyup(function() {    
    var v = $('#addSearch').val();
   $.getJSON('http://localhost/api/getresult/?q='+v, function(data){
     $('#append').html('');
      $.each(data, function (key,value){
         $('<div  id='+value["id"]+' class="searchResult">  
               '+value["name"]+' 
             </div>').appendTo($('#append'));

          bindClick();
       });
   });    
});    
});
function bindClick(){
    $('.searchResult').click(function(){
      alert($(this).attr("id"));
   });
 }

Answer 6

尝试这样，

$（'。searchResult'）。live（'click'，function（）{

alert($(this).attr("id"));

}）;

Onclick函数“div”没有附加

6 个答案: