在click方法内绑定事件

Binding events inside click method

本文关键字：绑定 事件 方法 click      更新时间：2023-09-26

之前有人告诉我不应该在函数内部绑定事件。我最好的解决这个问题的办法是什么?我点击一个链接，然后从这个链接中获取一些属性。以下是我目前正在做的。

$(".portfolioLink").click(function(){
            // Show slide and portfolio piece info
            $(".inner-content.portfolio").show();
            // Reset slides timer and pagination
            clearInterval($('#slides').data('interval'));
            $("ul.pagination li").removeClass("current");
            // Get ID from link that is clicked.
            var slideID = $(this).parent().attr("id");
            $("#previous").click(function() {
                slideID--;
                clearInterval($('#slides').data('interval'));
                $("ul.pagination li").removeClass("current");
                portfolioSwitch(slideID);
            });
            $("#next").click(function() {
                slideID++;
                clearInterval($('#slides').data('interval'));
                $("ul.pagination li").removeClass("current");
                portfolioSwitch(slideID);
            });
}

我有两个来回的按钮，分别是下一个和上一个按钮。根据我点击的链接，我想前进或后退。在$(".portfolioLink")点击事件之外拥有这些点击事件并同时从投资组合链接中获得这些属性的最佳方式是什么?

将点击事件绑定到另一个点击事件中意味着每次点击.portfolioLink时，一个新的点击函数被绑定到#previous/#next按钮，所以如果点击.portfolioLink两次，它将增加两次，如果点击三次，它将增加三次，等等。您可以在更高的范围内使用变量来解决这个问题，如下所示:

var slideID = 0;
$(".portfolioLink").click(function() {
    $(".inner-content.portfolio").show();
    clearInterval($('#slides').data('interval'));
    $("ul.pagination li").removeClass("current");
    slideID = $(this).parent().attr("id");
}
$("#previous, #next").click(function() {
    slideID = this.id=='next' ? slideID+1 : slideID-1;
    clearInterval($('#slides').data('interval'));
    $("ul.pagination li").removeClass("current");
    portfolioSwitch(slideID);
});
​

我之前被告知不应该在函数内部绑定事件

在函数内部绑定事件处理程序不是问题，只有当该函数是另一个事件处理程序时才会出现问题。如果其他事件处理程序将被执行多次(就像您的情况一样)，您将每次绑定(添加)一个新的事件处理程序，这通常不是您想要做的。

你可以使用一个共享变量(一个在公共作用域中的变量)…如果未设置slideID，则单击#next或#previous不做任何操作:

var slideID;
$(".portfolioLink").click(function(){
    // ...
    // Get ID from link that is clicked.
    slideID = $(this).parent().attr("id");
});
$("#previous").click(function() {
    if(typeof slideID !== 'undefined') {
       // ...
    }
});
$("#next").click(function() {
    if(typeof slideID !== 'undefined') {
       // ...
    }
});

或者用默认幻灯片号初始化slideID

相关文章：