单击功能“div”未附加

Question

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

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

但我的问题是 onclick 特定结果我无法获得附加结果的“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

你的key up方法是正确的，你只需要像这样修改点击事件：

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

Answer 2

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

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

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

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

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"));

});