jQuery UI sortable and live() click problem -- need to click twice after sorting for click to register

Question

I have a table I'm using jQuery UI's "sortable" on. In the table, I have rows consisting of a "drag handle" to grab and reorder the table, and cells with clickable items, like this:

<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's live() to bind a click event to the clickable items, like this:

$(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'm using live() because rows can be dynamically added to the table in the real code.

My problem is this: if I click on any of the clickable items before sorting, they work fine. After the user drags the rows to reorder them, though, I have to click twice for a click to register. After that second click, the clickable items go back to "normal", needing only one click, until the next time rows are dragged around.

If I use click() rather than live() -- as in the commented-out code -- then a single-click works fine at all times, but I'd rather use live(), as I said. And I'm curious as to why it's not working.

There's a live jsFiddle example here. Try dragging a row into a different position, then clicking on any of the "Testing..." links. In Firefox, at least, I need to click twice to get the "Successful click" alert.

Any ideas?

I verified the problem in FF, but it's a strange bug! Unless someone answers here with what I'm missing, you may want to file a bug report. — Stephen
– Stephen, Commented Nov 25, 2010 at 15:53
@Stephen Interesting, thanks; might indeed be a jQuery bug then. The problem also shows up in IE6, which is the only other browser I have available at work (don't ask!) — Matt Gibson
– Matt Gibson, Commented Nov 25, 2010 at 15:55
Interestingly, after I finish a drag, I can click once on the drag-handle and then on the link and it works. So it seems there is a problem with the click event bubbling or something. I would guess that it's a bug with jQuery UI dealing with the .live method, not jQuery. — Stephen
– Stephen, Commented Nov 25, 2010 at 15:57
@Stephen Have played and now see what you mean about .children('a'). Odd that .find('a') works, and also that .children('a') works for anything except live()... My head hurts now! — Matt Gibson
– Matt Gibson, Commented Nov 25, 2010 at 16:24

Allan Pereira · Accepted Answer · 2016-07-11 20:53:17Z

5

I was having this same issue with "live" and sortable when I found your post (delegate has the same problem as well). To follow up on the observation @Stephen made about clicking on the drag handle once before an item's click handler bound with live works without having to click twice... I've successfully used this workaround. For a hack, I don't find it too offensive.

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

I'm just issuing a click call to the drag handler as soon as the drag is complete, and now other items (in my row) that I have bound with live do not require clicking on twice.

edited Jul 11, 2016 at 20:53

Allan Pereira

2,5704 gold badges23 silver badges28 bronze badges

answered Jan 14, 2011 at 20:16

Eric Mitchell

512 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt Gibson Over a year ago

I'm afraid I can't verify this, as I've moved on to something different now, but +1 for adding the answer; hopefully it'll help someone else!

Stephen · Accepted Answer · 2010-11-30 12:48:50Z

2

It's unfortunate to end with the answer "It is a bug," but I guess sometimes that happens. Maybe I'll dust off my GitHub login and fork it to see if I can track it down and discover a fix.

answered Nov 30, 2010 at 12:48

Stephen

19k10 gold badges62 silver badges98 bronze badges

Collectives™ on Stack Overflow

jQuery UI sortable and live() click problem -- need to click twice after sorting for click to register

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related