jquery ui sortable trigger click

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 trigg开发者_开发百科er 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?