jQuery not detach()'ing if it contains an input tag

Question

Hi there

I have a table which i need to move elements up and down in. I have the code working, but as soon as I add a tag to it, it throws the error:

Error: this.visualElement is undefined
Source File: http://192.9.199.11:83/templates/admin/js/jquery/ui.checkbox.js
Line: 94

The HTML looks like this:

<table width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <th>Menu</th>

        <td>Builds the main navigation menu panel</td>
        <td width="80px">
            <input type="hidden" class="hiddenData" name="" value="1" />
            <a href="" title="Up" class="upArrow arrowButtons"></a>
            <a href="" title="Down" class="downArrow arrowButtons"></a>
        </td>
    </tr>

    <tr>
        <th>Proudly Support</th>
        <td>A widget which displays company's we proudly support</td>
        <td width="80px">
            <input type="hidden" class="hiddenData" name="" value="2" />
            <a href="" title="Up" class="upArrow arrowButtons"></a>
            <a href="" title="Down" class="downArrow arrowButtons"></a>
        </td>
    </tr>
</table>

And the jQuery is as follows:

$(".arrowButtons").live('click', function(e) {
    e.preventDefault();
});

$(".upArrow").live('click', function(e) {
    var element = $(this).parent().parent();

    if(element.prev().html() != null)
    {
        var elementContents = element.html();

        $("<tr>"+elementContents+"</tr>").insertBefore(element.prev());
        element.remove();
    }
});

Any idea on why that could be happening?

Answer 1

I just commented out the lines that were causing the problem in ui.checkbox.js and it is working. Will do proper testing, but so far everything seems to be working.