1

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

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

但我的问题是特定结果的 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"));
});

4

6 回答 6

2

Your key up method is correct, you just need to modify the click event like this:

$(document).on('click', '.searchResult', function(e) {
    alert($(this).attr('id'));
});​
于 2013-01-02T10:08:24.207 回答
1

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

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

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

This requires that the #append element is in the DOM at the time of the call, but any .searchResult elements inserted later will be able to trigger the event handler through event propagation. Another advantage is that there is only one event handler handling the click event for all .searchResult elements, instead of having an event handler for each individual element.

于 2013-01-02T10:05:40.527 回答
0

尝试

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'));
于 2013-01-02T09:48:37.813 回答
0

你不需要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"] + ...

于 2013-01-02T09:50:28.027 回答
0

您正在尝试在元素进入 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"));
   });
 }
于 2013-01-02T09:59:36.943 回答
0

try like this,

$('.searchResult').live('click', function() {

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

});

于 2013-01-02T10:43:18.347 回答