リンクの `onclick`イベントにどのようにアタッチするのですか？ （オートコンプリート）

Question

オートコンプリートを実行します。ドロップダウンのプロンプトでリンクを作成する必要があります。

私はこのpluginを使用しています。

$(function() { 
    $('input[name="oem"]').autoComplete({ 
     minChars: 4, 
     source: function (term, response) { 
      term = term.toLowerCase(); 
      $.getJSON('/search.json?oem=' + term, function (data) { 
       var matches = []; 
       for (i = 0; i < data.length; i++) 
        if (~data[i].toLowerCase().indexOf(term)) 
         matches.push(data[i]); 
       response(matches.slice(0, 11)); 
      }); 
     }, 
     renderItem: function (item, search) { 
      search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g); 
      var re = new RegExp("(" + search.split(' ').join('|') + ")"); 
      return '<div class="autocomplete-suggestion" data-val="' + item + '"><a href="#" onclick="javascript:document.location.href="#"">' + item.replace(re, "<b>$1</b>") + '</a></div>'; 
     } 
    }); 
}); 

どのようにonclickのイベントにリンクを添付できますか？
他にも変種はありますか？

Answer 1

あなたは、たとえばclass="dynamically-added"ため、renderItem関数内でご動的に生成<a></a>タグにクラスを配置し、このクラスのクリックした項目のために待機している文書にイベントハンドラをアタッチすることができます。このデモチェック：

$(document).ready(function(){ 
 
    
 
    // This is how you can handle click event of dynamically added elements via jQuery 
 
    $(document).on('click', '.dynamically-added', function(){ 
 
    console.log('clicked -> ' + $(this).text()); 
 
    }); 
 
    
 
    var container = $('#container'); 
 
    
 
    for(var i=1; i < 6; i++){ 
 
    container.append('<a href="#" class="dynamically-added">Dynamically added '+i+'</a><br/>'); 
 
    } 
 
    
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    
 
</div>

EDIT

をだからあなたのコードは次のようになります。

以下

$(document).ready(function() { 

    // This is the event handler code 
    $(document).on('click', '.dynamically-added', function() { 
     console.log('clicked -> ' + $(this).text()); 
    }); 

    $('input[name="oem"]').autoComplete({ 
     minChars: 4, 
     source: function (term, response) { 
      term = term.toLowerCase(); 
      $.getJSON('/search.json?oem=' + term, function (data) { 
       var matches = []; 
       for (i = 0; i < data.length; i++) 
        if (~data[i].toLowerCase().indexOf(term)) 
         matches.push(data[i]); 
       response(matches.slice(0, 11)); 
      }); 
     }, 
     renderItem: function (item, search) { 
      search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g); 
      var re = new RegExp("(" + search.split(' ').join('|') + ")"); 
      // Here check your <a> I added class="dynamically-added" 
      return '<div class="autocomplete-suggestion" data-val="' + item + '"><a href="#" class="dynamically-added">' + item.replace(re, "<b>$1</b>") + '</a></div>'; 
     } 
    }); 

}); 

Answer 2

を、私はあなたが構築している方法を変更しましたあなたのコードに文字列を返します。

return "<div class='autocomplete-suggestion' data-val='" + item + "'><a href='#' onclick='javascript:document.location.href="+\""+"#"+\""+">" + item.replace(re, "<b>$1</b>") + "</a></div>";