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>

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

screenshot

Answer 1

使用jQuery 1.8 +

的事件委托

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

这允许在添加处理程序时项目不存在。

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

jQuery .on()

Answer 2

要扩展@Bluetoft回答：如果您有多个事件，则可以委托映射对象，如下所示：

$('.ac_results').on({
  click : function(){alert($(this).text()}, 
  mouseleave : function(){ //etc...} 
}, 'li');

我通常更喜欢这种语法。

Answer 3

最好的决定是将属性methodChain放在小部件调用的末尾：

`<?php $this->widget('CAutoComplete', array(
        'model'=>$model,
        'name'=>'name',
        'url'=>array('url'),
        'minChars'=>2,
        'methodChain'=>".result(function() { someFunction(); })",
    )); ?>`

其中comFunction（）是在单击自动完成结果列表时调用的函数。

Jquery - 将单击事件处理程序添加到由自动完成生成的<li> </li>

3 个答案: