JQuery UI 可选:预选列表项

发布于 2024-12-20 12:03:35 字数 1334 浏览 0 评论 0原文

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

,但我无法让单击函数正常工作(单击将调用“选定的”匿名回调。)任何指针都会有帮助/。

I am trying to implement the click of the first item of the selectable list.I can add the CSS
but unable to get the click event working when i try to pre select the first item (I need the click since ,onclick event has an ajax call to populate related information on another div..)
I even tried to use the the trigger method , but couldnt get this working on the fist item on the list. The code is standard stuff.

    <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

        $(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 ) );
                });
            }
        });
    });

I can apply the css to the first list item like this

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

But i cant get the click function to work (The click would invoke the 'selected' anonymous call back.) Any pointers would be helpful/.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

神仙妹妹 2024-12-27 12:03:35

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

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

After some trying i managed to get it working.Posting the solution as it may be useful.
I want to simulate the mouse click on the first item on the selectable list.For that we first need to bind

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

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


    });
    });    

Once you do that we need to fire the click.I put this in the create callback which is called as soon as the selectable is formed.

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

            }, 100 );

the great thing about Jquery is that its so intutive.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文