Question

我正在尝试用引导模式替换<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="NDateCount" style="display:inline-block">  <small style="display:none;" class="ng-binding">2017-07-08T12:44:10.367+06:00</small> <small ng-show="CountPostDate(post.timelineStrore.creationDate) < 2" style="color:#1ab394;" class="ng-binding"><i class="fa fa-clock-o"></i> 3 hours ago</small>  </div> <div class="NDateCount" style="display:inline-block">  <small style="display:none;" class="ng-binding">2017-07-08T12:44:10.367+06:00</small> <small ng-show="CountPostDate(post.timelineStrore.creationDate) < 2" style="color:#1ab394;" class="ng-binding"><i class="fa fa-clock-o"></i> 3 hours ago</small>  </div>框以进行页面中的保存/删除操作。每个操作都有一个按钮（称之为动作按钮），然后触发相应的模态。单击模态上的确认按钮时，将触发相应的功能。

我没有为每个操作编写模态，而是在考虑是否只使用一个确认模式并在单击“操作按钮”时更改事件处理程序。像这样：

confirm()

单击$("#confirm-button").attr('onclick',save_all());按钮时。这是不好的做法吗？还有什么替代方案？谢谢！

Answer 1

它甚至不会按照您的意图执行，因为您在设置属性时调用save_all，它将是存储在onclick属性中的函数的返回值，转换为字符串，如果它还不是一个字符串。这很可能不是你想要做的。

即使属性值正确，也不是最佳做法，因为：

需要评估/解析该属性值，这意味着您可以获得较晚的语法错误
它取代了onclick属性的先前值，这可能是一个不受欢迎的效果（虽然我理解你的情况就是你想要的）

相反，使用jQuery方式绑定事件处理程序，并确保不调用该函数，但传递其引用：

$("#confirm-button").on('click', save_all);

如果目的是替换任何以前的点击处理程序，那么在off调用中链接：

$("#confirm-button").off('click').on('click', save_all);

Answer 2

我不认为更改事件处理程序是一个不错的选择，因为您应该处理以前的附加处理程序，以避免内存泄漏和奇怪的行为。

更好的方法是定义一个通用处理程序，该处理程序将从DOM上的 data 属性中读取，在确认时该怎么做。

主要部分是这种处理程序不应与工作人员配合使用。

要实现此目的，您可以定义将从通用处理程序触发的自定义事件。

我的意思是：

function confirmAction(ev) {
    // you can save in the HTML the name of the proper event
    var whatEv = $(this).data('my-key');

    // Here you could fire a custom event.
    $(this).trigger(whatEv);
}

最后，正如@trincot指出的那样，OP中的代码是错误的。

动态设置/更改事件处理程序是不好的做法吗？

2 个答案: