2

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>

リスト項目がクリックされたときにイベントを発生させたいコードから明らかかどうかはわかりません。

スクリーンショット

4

3 に答える 3

5

jQuery 1.8 + でイベント委任を使用する

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

これにより、ハンドラーを追加するときにアイテムが存在しないようにすることができます。

documentコードの実行時に確実に存在する最も近い親要素に置き換えます。

jQuery.on()

于 2012-12-13T19:50:42.793 に答える
0

@Bluetoftの回答を拡張するには：複数のイベントがある場合は、次のようにマップされたオブジェクトを委任できます。

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

私は一般的にこの構文を好みます。

于 2012-12-13T19:54:54.500 に答える