Question

是不是有更好的方法来编写这段代码？在某种程度上，我可以创建按钮添加添加到过滤器div类与附加的CSS和点击功能？

$('.dataTables_filter').parent().append('<button class="btn btn-primary" id="addnew">Add New</button>');

$('#addnew').css('margin-right', '20px').css('margin-bottom', '5px').css('float', 'right').on('click', function(e) {
    e.preventDefault();
    window.location.replace(window.location.href + '/create');
});

Answer 1

首先，css()接受一个对象，因此您可以在一次调用中添加多个属性：

$foo.css({
    'margin-right': '20px',
    'margin-bottom': '5px',
    'float': 'right'
});

然而，这仍然不理想，因为这意味着您的JS代码中有CSS逻辑。最好的解决方案是将规则设置为CSS类，并根据需要添加/删除该类：

.foo {
    margin-right: 20px,
    margin-bottom: 5px,
    float: right;
}

$foo.addClass('foo');

关于您的第一个问题，您可以动态创建button元素并立即创建其“点击处理程序”，如下所示：

var $button = $('<button />', { class: 'btn btn-primary', id: 'addnew', text: 'Add New' }).click(function(e) {
    e.preventDefault();
    window.location.replace(window.location.href + '/create');
}).appendTo($('.dataTables_filter').parent());

或者，您可以使用委派的事件处理程序在文档加载时添加click事件，而不是在创建按钮时添加：

// on load
$('.dataTables_filter').parent().on('click', '#addnew', function(e) {
    e.preventDefault();
    window.location.replace(window.location.href + '/create');
});

Answer 2

我想你可以将你的代码减少到这个：

$('.dataTables_filter').parent().append(
    '<button class="btn btn-primary" style="margin-right: 20x; margin-bottom: 5px; float: right;" onclick="window.location.replace(window.location.href + \"/create\"); return false" id="addnew">Add New</button>'
);

将代码与jQuery合并

2 个答案: