2

我正在尝试创建一个输入表，当您在底线的一个输入中输入文本时，该表会自动添加一个新行。在大多数情况下，它工作正常。但是，我在使用 jQuery UI 复选框按钮时遇到了一些问题。

复选框按钮应该在单击时更改其图标。这适用于原始按钮，但添加新行时出现的克隆按钮无法正常工作。

您可以在此处的 jsfiddle中看到它。要复制该问题，请在第三个输入中放置一些文本。您会看到出现了第四行。如果您按下第四个复选框，您会看到第三个复选框是图标发生变化的那个。错误的按钮也获得了 ui-state-focus 但实际上并没有获得焦点，这真的让我感到困惑，尽管正确的按钮确实获得了 ui-state-active 并且据我所知，似乎评估为已检查适当地。

需要明确的是，这两个复选框没有相同的 ID，它们的标签用于正确的复选框 - createNewRow() 函数负责处理。如果您注释掉将复选框转换为 jQuery UI 复选框的行，您将看到一切正常。如果你在 buttonSwitchCheck 函数中控制台记录 $(this).attr('id') 的值，你会看到它在那里也有正确的 ID - 如果你点击第四个按钮，它会告诉你$(this) 的 id 是“test4”，但它是“test3”（第三个按钮）使图标发生变化。

盯着这个我会发疯的，我会很感激人们能提供的任何帮助。这是代码：

// 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);
});

编辑：我能够找到一个解决方案，我将与年龄分享。感谢下面的“Funky Dude”，他启发了我开始沿着正确的轨道思考。

诀窍是在克隆之前销毁原始行中的 jQuery UI 按钮，然后立即为原始行和副本重新初始化它。您不需要取消绑定和重新绑定更改事件 - 只是 jQuery UI 按钮有问题。在 createNewRow 函数中：

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

2 回答 2

2

尝试使用.on允许委托的较新方法，这应该有助于动态更改 DOM：

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

我不确定，但这可能有助于不必担心将事件绑定到特定元素。

此外，您可以将其用于文本框change事件：

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

这是您对我的更改的小提琴：http: //jsfiddle.net/Cugb6/3/

它的功能没有任何不同，但对我来说，它更干净一些。我认为它会解决您的问题，但显然没有，因为button小部件存在问题。

有趣的是，他们似乎不“支持”克隆：http ://bugs.jqueryui.com/ticket/7959

于 2013-02-12T18:19:02.253 回答
1

我认为您正在使用深度克隆，它也克隆事件处理程序。在您的创建新行函数中，尝试取消绑定更改事件，然后重新绑定克隆。

于 2013-02-12T18:26:07.433 回答