jquery - 我应该如何调用我的 JavaScript. href、onclick还是绑定(bind)click事件？

Question

我知道已经有很多关于这个概念的文章，但我的问题有点不同。

在我的页面上，我有一个链接:

<a id="mylink">click me </a>

然后我使用动态更改 href:

$get('mylink').href = 'javascript:doSomething(id);';

碰巧我必须多次调用上述代码，因此我使用 JavaScript 代码覆盖 href 属性的当前值，并使用不同的 id 参数调用相同的函数。

上面是我现在使用很长一段时间的内容，但是当我尝试实现 OnNavigateAway 以在用户关闭浏览器窗口时发出警告时，困惑就开始了。当用户单击带有 href 属性值的 anchor 时，IE 也会触发此 onNavigateAway 事件。

所以我开始用 jQuery 点击事件替换这些 href:

$("#mylink").click(function (e) {
doSomething(id);
e.preventDefault();
});

但是请记住，这段代码可以被多次调用，所以我必须先取消绑定(bind)点击事件，然后再次绑定(bind):

function completed(result) { 
$("#mylink").unbind('click'); 
    $("#mylink").click(function (e) {
    doSomething(result.id);
    e.preventDefault();
    });
}

这是处理 JavaScript 的好方法吗？或者这种绑定(bind)和解除绑定(bind)的东西不是好的做法吗？

执行此操作的另一种方法是使用 JavaScript 手动覆盖 onclick 属性。

你会如何处理这个问题？

我期待您的回复。

Answer 1

我会在这里使用不同的逻辑。我不会重新分配点击事件，而是只更改一些数据属性，然后在“全局”点击事件中使用此属性:

$("#mylink").on("click", function (e) {
    doSomething($(this).data("id"));
    e.preventDefault();
});

然后当你需要更改id时有这样的代码:

$("#mylink").data("id", id);

这种方式重复调用更改数据将导致仅最后一个影响，例如

$("#mylink").data("id", 5);
$("#mylink").data("id", 6);
$("#mylink").data("id", 7);

单击时，7 将传递给函数。

Live test case .

如果元素是动态创建的，并且假设您使用的是 jQuery 1.7 或更高版本，您可以使用 .on 来捕获那些动态创建的元素:

$("body").on("click", "#mylink", function (e) {
    doSomething($(this).data("id"));
    e.preventDefault();
});