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

キーアップ方法は正しいです。クリックイベントを次のように変更するだけです。

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

Adarsh Raj が指摘したように、AJAX コールバックに追加clickする要素にハンドラーをバインドしていません。.searchResultjQuery コレクションは「ライブ」ではないため、イベント ハンドラーは呼び出し時に一致する DOM 要素に直接バインドされます。

ただし、ハンドラーを挿入された各要素に手動でバインドする代わりに、親要素で委任されたイベント ハンドラーを使用する必要があります。

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

これには、#append要素が呼び出し時に DOM にある必要がありますが、.searchResult後で挿入された要素は、イベントの伝播を通じてイベント ハンドラーをトリガーできます。もう 1 つの利点は、個々の要素ごとにイベント ハンドラーを用意するのではなく、すべての .searchResult要素のクリック イベントを処理するイベント ハンドラーが 1 つしかないことです。

于 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

要素がDOMになる前にクリック機能をバインドしようとしています。したがって、ループ内でイベントをバインドしてください

$(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

このようにしてみて、

$('.searchResult').live('クリック', function() {

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

});

于 2013-01-02T10:43:18.347 に答える
0

あなたは必要ありませんvar a

$(stuff).appendTo(selector)結構です。

それは解決策ではありませんが、1つの観察です。

したがって、バックエンドからの応答が次のような 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 に答える