Question

我需要帮助。我有一个页面显示引导数据表中的记录。记录每页显示10行，每行在左列上有一个复选框。我想要做的是，当用户点击该行时，它将检查复选框并启用放在表格后面的按钮（用户必须至少选择一个复选框来激活/启用该按钮）。我已经实现了这个，但不幸的是它只适用于第一页。当用户转到第二页并单击表行时，不会选中该复选框。有人可以帮帮我吗？我非常感激。

//disable button when no records are selected
var checkboxes = $("input[type='checkbox']");
var btn = $("#button");
btn.attr("disabled","disabled");

checkboxes.on('click', function(event) {
    if($(this).prop('checked')){
        btn.removeAttr('disabled');
    } else {
        btn.attr("disabled",!checkboxes.is(":checked"));
    }
});

//this will check the checkbox whenever user clicks the table row
$('.clickable-row').click(function (event) {
    if (event.target.type !== 'checkbox') {
        $(':checkbox', this).trigger('click');
    }
});

Answer 1

当您使用带有jQuery的DataTables时，插件通过在切换页面时添加和删除DOM中的元素来管理页面上显示的行。当表加载时，DOM中存在的唯一行是出现在第一页上的行。

这意味着您的处理程序只会被添加到第一页的元素中，一旦您切换页面，这些元素将被删除，因此当您返回到第1页时，这些元素将是新创建的元素，不附加处理程序。

将您的代码更改为：

function mapStateToProps(state) {
  return {
    photoResults: state.photoResults,
    favorites: state.favorites
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actionCreators, dispatch)
  };
}

这称为event delegation

另见Event binding on dynamically created elements?

可点击行仅适用于数据表中的第一页

1 个答案: