1

我正在尝试实现对可选列表的第一项的单击。我可以添加 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");

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

4

1 回答 1

3

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

$( "#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 的伟大之处在于它非常直观。

于 2011-12-13T15:58:11.170 回答