jquery ui可排序触发器点击

时间:2011-06-02 22:47:50

标签: jquery-ui click jquery-ui-sortable eventtrigger

我在使用jquery sortable时遇到了一些问题...

在排序之后,触发的元素的click事件被触发,并且在此之上,拖动模式没有得到恢复,因此该元素保留所有的线条样式(例如,position:绝对)由插件创建!

我写了一个触发问题的类似情况:

html

<ul>

</ul>

<p class="add">add</p>

js:

$(document).ready( function() {
    $("ul").sortable();

    $('.add').click(function(){
        var $li = $('<li>').appendTo( $('ul') )
        var $a = $('<a>').attr('href','#').text('test' + ($('a').length + 1) ).appendTo($li)

        $li.bind('click', function(){
            activate($li)
            return false
        })
    })

     $(document).bind('click.outside', function(){
        alert('click outside')
    })
});

function activate($li){
    $('a', $li).text('click');
}

activate()将新元素添加到列表中并将单击处理程序绑定到它们。点击触发元素的“激活”。问题是即使在排序后也会触发click事件,并且我确实不想要这个!

如果使用添加功能之外的live()将事件绑定到$ li,则不会出现此问题:

$(document).ready( function() {
    $("ul").sortable();

    $('.add').click(function(){
        var $li = $('<li>').appendTo( $('ul') )
        var $a = $('<a>').attr('href','#').text('test' + ($('a').length + 1) ).appendTo($li)
        return false;
    })

    $('li').live('click', function(){
        activate($(this))  
        return false;
    })

    $(document).bind('click.outside', function(){
        alert('click outside')
    })
});

function activate($li){
    $('a', $li).text('click');
}

但我不想这样做,因为我想将事件处理程序绑定到文档以捕获元素之外的点击,而live(),如你所知,即使返回false也不能停止事件传播。

有什么想法吗?

0 个答案:

没有答案