CODEWITHSUNDEEP
javascriptjqueryjquery-ui
flyingGhoti
flyingGhoti

Reputation: 97

jQuery UI checkboxes misbehaving when cloned

I'm trying to create a table of inputs that automatically adds a new row when you enter text in one of the inputs on the bottom line. For the most part, it works fine. However, I'm having some trouble with jQuery UI checkbox buttons.

The checkbox buttons are supposed to change their icon when clicked. This works fine for the original buttons, but the cloned button that appears when you add a new row doesn't work properly.

You can see it in jsfiddle here. To replicate the issue, put some text in the third input down. You'll see that a fourth row appears. If you press the fourth checkbox, you'll see the third checkbox is the one whose icon changes. The wrong button also gets ui-state-focus but doesn't actually get focus, which really baffles me, though the correct button does get ui-state-active and seems, as far as I can tell, to evaluate as having been checked properly.

To be clear, the two checkboxes do not have the same ID, and their labels are for the right checkbox - the createNewRow() function takes care of that. If you comment out the line that turns the checkboxes into jQuery UI checkboxes, you'll see everything works fine. If you console.log the value of $(this).attr('id') in the buttonSwitchCheck function, you'll see that it has the right ID there too - if you click the fourth button, it'll tell you that the id of $(this) is "test4", but it's "test3" (the third button) that gets the icon change.

I'm going mad staring at this and I'd appreciate any help people can give. Here's the code:

// Turns on and off an icon as the checkbox changes from checked to unchecked.
function buttonSwitchCheck() {
    if ($(this).prop('checked') === true) {
        $(this).button("option", "icons", {
            primary: "ui-icon-circle-check"
        });
    } else {
        $(this).button("option", "icons", {
            primary: "ui-icon-circle-close"
        });
    }
}

// Add a new row at the bottom once the user starts filling out the bottom blank row.
function createNewRow() {
    // Identify the row and clone it, including the bound events.
    var row = $(this).closest("tr");
    var table = row.closest("table");
    var newRow = row.clone(true);
    // Set all values (except for buttons) to blank for the new row.
    newRow.find('.ssheet').not('.button').val('');
    // Find elements that require an ID (mostly elements with labels like checkboxes) and increment the ID.
    newRow.find('.ssheetRowId').each(function () {
        var idArr = $(this).attr('id').match(/^(.*?)([0-9]*)$/);
        var idNum = idArr[2] - 0 + 1;
        var newId = idArr[1] + idNum;
        $(this).attr('id', newId);
        $(this).siblings('label.ssheetGetRowId').attr('for', newId);
    });
    // Add the row to the table.
    newRow.appendTo(table);
    // Remove the old row's ability to create a new row.
    row.removeClass('ssheetNewRow');
    row.find(".ssheet").unbind('change', createNewRow);
}

$(document).ready(function () {
    // Activate jQuery UI checkboxes.
    $(".checkButton").button().bind('change', buttonSwitchCheck).each(buttonSwitchCheck);

    // When text is entered on the bottom row, add a new row.
    $(".ssheetNewRow").find(".ssheet").not('.checkButton').bind('change', createNewRow);
});

EDIT: I was able to find a solution, which I'll share with the ages. Thanks to "Funky Dude" below, who inspired me to start thinking along the right track.

The trick is to destroy the jQuery UI button in the original row before the clone, then reinitializing it immediately afterwards for both the original row and the copy. You don't need to unbind and rebind the change event - it's just the jQuery UI buttons which have trouble. In the createNewRow function:

row.find('.checkButton').button('destroy');
var newRow = row.clone(true);
row.find('.checkButton').add(newRow.find('.checkButton')).button().each(buttonSwitchCheck);

Upvotes: 2

Views: 1124

Answers (2)

Ian
Ian

Reputation: 50903

Try using the newer method .on, that allows for delegation, which should help with the dynamic changes to your DOM:

$(".checkButton").button().each(buttonSwitchCheck);
$("table").on("change", ".checkButton", buttonSwitchCheck);

I'm not sure, but it might help with not having to worry about binding events to specific elements.

Also, you could use it for the textbox change event:

$("table").on("change", ".ssheetNewRow .ssheet:not(.checkButton)", createNewRow);

Here's your fiddle with my changes: http://jsfiddle.net/Cugb6/3/

It doesn't function any different, but to me, it's a little cleaner. I thought it would've fixed your problem, but obviously hasn't, due to problems with the button widget.

And funny enough, it doesn't seem they "support" cloning: http://bugs.jqueryui.com/ticket/7959

Upvotes: 2

Funky Dude
Funky Dude

Reputation: 3967

i think you are using deep clone, which also clones the event handler. in your create new row function, try unbinding the change event then rebind on the clone.

Upvotes: 1

Related Questions