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");


    });
    });

一旦你这样做，我们需要触发click.I把它放在create callback中，一旦selectable形成就调用它。

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

            }, 100 );

关于Jquery的伟大之处在于它如此直观。

JQuery UI可选：预选列表项

1 个答案: