Jquery - 将点击事件处理程序添加到由自动完成生成的

Question

我正在使用 jQuery 自动完成脚本将字符串值传递到我的数据库，该数据库以 json 格式返回数据。通过查看 firebug，我可以在自动完成中单击的项目是具有样式的列表项目，以删除项目符号点并使其更漂亮。

我的问题是我想触发一个点击事件来捕获我选择的列表项。

$("#group_name").autocomplete('@Url.Action("LookUpGroupName", "UserManager")',
                    {
                        dataType: 'json',
                        parse: function (data) {
                            var rows = new Array();
                            for (var i = 0; i < data.length; i++) {
                                rows[i] = {
                                    data: data[i],
                                    value: data[i].group,
                                    result: data[i].group
                                }
                            }
                            return rows;

                        },
                        formatItem: function (row, i, max) { // loop returns autocomplete items
                            return row.group;
                        },
                        width: 300,
                        multiple: false
                    });              // End of autocomplete

$(document).ready(function () {
        chkSelection();

        $(".ac_results li").click(function (event) {
            alert($(this).text());
        });
    });

这是从我的自动完成 JavaScript 生成的 html

<div style="display: block; position: absolute; width: 300px; top: 437.9px; left: 103.65px;" class="ac_results">
    <ul style="max-height: 180px; overflow: auto;">
        <li class="ac_even">118 Medi<strong>a</strong> ltd</li>
        <li class="ac_odd">2CV Rese<strong>a</strong>rch ltd</li>
        <li class="ac_even">7digit<strong>a</strong>l</li <li class="ac_odd">
        <strong>A</strong> br<strong>a</strong>nd<strong>a</strong>p<strong>a</strong>rt television ltd</li>
        <li class="ac_even"><strong>A</strong> Tout Fr<strong>a</strong>nce</li>
        <li class="ac_odd"><strong>A</strong>bb<strong>a</strong> Blinds</li>
        <li class="ac_even"><strong>A</strong>berdeen Journ<strong>a</strong>ls</li>
        <li class="ac_odd"><strong>a</strong>cc suspended <strong>A</strong>LF connect <strong>A</strong>lw<strong>a</strong>ys on Mess<strong>a</strong>ge</li>
        <li class="ac_even ac_over"><strong>A</strong>ccount suspended South West Medi<strong>a</strong> Group</li>
        <li class="ac_odd"><strong>A</strong>ctive Intern<strong>a</strong>tion<strong>a</strong>l</li>
    </ul>
    </div>

我不确定我的代码是否清楚我想在单击列表项时触发一个事件。

Answer 1

通过 jQuery 1.8 + 使用事件委托(delegate)

$(document).on('click','.ac_results li',function(){blaa,blaa,blaa});

这样，当您添加处理程序时，该项目就不会出现。

将 document 替换为代码运行时肯定存在的最接近的父元素。

jQuery .on()