JQuery UI selectable：预选列表项

Question

我正在尝试实现单击可选列表的第一项。我可以添加 CSS 但是当我尝试预先选择第一个项目时无法使单击事件工作（我需要单击，因为，onclick 事件有一个 ajax 调用来填充另一个 div 上的相关信息..） 我什至尝试使用触发方法，但无法在列表中的第一个项目上使用它。代码是标准的东西。

    <ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
     <ol>

jquery函数

        $(function() {
        $( "#selectable" ).bind("mousedown", function (e) {
            e.metaKey = false;
        }).selectable({
             selected: function(event, ui) {

                 alert("selected");

             },
            stop: function() {
                var result = $( "#select-result" ).empty();
                $( ".ui-selected", this ).each(function() {
                    var index = $( "#selectable li" ).index( this );
                    result.append( " #" + ( index + 1 ) );
                });
            }
        });
    });

我可以像这样将 css 应用到第一个列表项

    $('li:first-child').select().addClass("ui-selected");

但我无法让点击功能工作（点击会调用“选定”匿名回调。）任何指针都会有所帮助/。

Answer 1

经过一番尝试，我设法让它工作。发布解决方案，因为它可能有用。 我想模拟鼠标点击可选列表中的第一项。为此我们首先需要绑定

$( "#selectable" ).bind( "selectableselected", function(event, ui) {

    $( ".ui-selected", this ).each(function() {
    var index = $( "#selectable li" ).index( this );
    alert("test");


    });
    });    

一旦你这样做了，我们需要触发点击。我把它放在创建回调中，一旦形成可选择项就会被调用。

    create: function(event, ui) {
            setTimeout( function() {
    $('li:firstchild').addClass("uiselected").trigger('selectableselected');

            }, 100 );

Jquery 的优点在于它非常直观。