jQuery自动完成项目点击和事件冒泡

时间:2011-09-27 15:53:12

标签: jquery jquery-ui events autocomplete event-propagation

如何获取链接点击以触发选择?

编辑:我引用为什么不行$(“a:contains('item2')”)。click();触发自动完成菜单选择?

<!doctype html>
<head>
    <title>Test</title>
    <script src="jquery-1.6.4.js"></script>
    <script src="jquery-ui-1.8.16.js"></script>
</head>

<script>

$(function() {

var menu = $('<div></div>')
    .attr('id', 'menu')
    .appendTo('body')
    .autocomplete({
        minLength: 0, 
        source: ['item1','item2'], 
        select: function(event, ui){
            alert('selected ' + ui.item.label);
        }
    })
    ;

$('<button></button>')
    .attr('id', 'open')
    .button({
        label: 'display menu'
        })
    .click(function() {
        menu.focus();
        menu.autocomplete("search", "");
    })
    .appendTo('body')
    .height(30)
    ;

$('<button></button>')
    .click(function() {
        $("#open").click();
        $("a:contains('item2')").click();
    })
    .appendTo('body')
    ;

});

</script>

<body>
</body>
</html>

1 个答案:

答案 0 :(得分:4)

这是由自动完成窗口小部件中的“不幸”选项引起的 - 它不知道您选择的项目,除非您之前“徘徊”它以使其成为活动菜单选项。

$('<button></button>')
  .click(function() {
    $("#open").click();
    $("a:contains('item2')").trigger('mouseover').trigger('click');
  })
  .appendTo('body');