如何附加到链接的`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

您可以将类放在<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>";