Geek Answers Handbook

JQuery UI sortable and live () click problem - you need to double-click after sorting to click to register

I have a table on which I am using the jQuery UI "sortable". The table has rows consisting of a “drag marker” to capture and reorder the table, and cells with interactive elements, for example:

<table id="test-table">
    <tbody>
    <tr>
        <td class="handle"><div class="ui-icon ui-icon-arrowthick-2-n-s" /></td>
        <td class="clickycell"><a href="#">Testing 1</a></td>
    </tr>
    <tr>
        <td class="handle"><div class="ui-icon ui-icon-arrowthick-2-n-s" /></td>
        <td class="clickycell"><a href="#">Testing 2</a></td></td>
    <tr>
        <td class="handle"><div class="ui-icon ui-icon-arrowthick-2-n-s" /></td>
        <td class="clickycell"><a href="#">Testing 3</a></td></td>
    </tr>
    </tbody>
</table>

In my code, I make the table sortable, and also use jQuery live()to bind the click event to the elements activated by the click, for example:

$(function() {
    /*
       Using live() because in my real code table rows are dynamically added.
       However, if I use click() instead, as in the commented-out code, it works
       fine, without any need to click twice.

    */
    // $(".clickycell a").click(function() {
    $(".clickycell a").live('click', function() {
        alert("Successful click");
        return false;
    });
    $("#test-table tbody").sortable({
        handle: "td.handle", /* Use the draggy handle to move, not the whole row */
        cursor: "move"
    });
});

I use it live()because rows can be dynamically added to a table in real code.

: , . , , , , . , , " ", , .

click() live() - - , live(), . , .

jsFiddle. , "...". , Firefox , " ".

?

+5
2

, " ," , , . , GitHub , , .

+2

"" , ( ). @Stephen, , , ... . .

$('table.demo tbody').sortable({
    handle: 'td.drag',
    stop: function(e,ui){
        $('td.drag', ui.item).click();
    }
});

, , ( ), , .

+5

More articles:


All Articles