jquery ui 可排序触发点击

发布于 2024-11-11 16:10:54 字数 1544 浏览 2 评论 0原文

我在 jquery sortable 方面遇到了一些问题...

排序后，删除的元素的单击事件被触发，最重要的是，拖动模式不会恢复，因此元素保留所有由插件创建的内线样式（例如位置：绝对）！

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

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() 将新元素添加到列表中并将单击处理程序绑定到它们。单击触发元素的“激活”。问题是即使在排序后点击事件也会被触发，并且我肯定不希望这样！

如果您在添加函数之外使用 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。

有什么想法吗？

原文

I'm having some problems with jquery sortable...

It happens that after sorting, the click event of the element dropped get triggered, and on the top of this, the dragging mode doesn't get revert, so the the element retain all the in line style (eg. position:absolute) created by the plugin!

I wrote a similar situation that triggers the problem:

the html

<ul>

</ul>

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

the 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() add new elements to the list and bind a click handler to them. the click trigger the "activation" of the element. the problem is that the click event get triggered even after sorting and for sure i don't want this!

The problem doesn't appear if you bind the event to the $li using live() outside the adding function:

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

but i don't want to do this since i want to bind an event handler to document to catch clicks outside the element, and live(), as you know, cannot stop event propagation, even with return false.

Any idea?

分享到QQ

分享到微博