如何附加到鏈接的「onclick」事件？ （自動完成）

Question

做autocomple。需要在下拉菜單中提示進行鏈接。我使用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

你可以把類的動態生成<a></a>標籤內renderItem功能，例如class="dynamically-added"，然後附加事件處理程序的文件，正在監聽此類的點擊項目。檢查這個演示：

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

編輯

所以，你的代碼看起來就像這樣：

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