Javascript 单击事件对象跟踪灾难

因此，我正在处理这个问题，但是jQuery通过单击事件获取元素id。然后，这将触发一个类似于弃用的.toggle（）的函数—它在第一次单击时向下滑动一个元素，在第二次单击时向上滑动该元素。但是，有一个bug会导致元素在点击次数上下滑动。例如，如果这是我第二次使用.clickToggle函数，那么元素（表）在稳定之前会上下滑动两次，以此类推。我怀疑它与事件对象有关，例如，跟踪点击次数——也就是说，我可能不应该设置id=e.target.id-——但我不确定如何在仍然获得所需的相关元素id的情况下进行修复

这是相关的clickToggle插件（这里有关于stackoverflow的回答）

下面是符合上述描述的错误代码

$(document).click(function(e) { 
        //get the mouse info, and parse out the relevant generated div num 
        var id =  e.target.id; 
        var strId = id.match(/\d$/); 

        //clickToggle the individual table
        $('#showTable' + strId).clickToggle(function () {
            $('#table' + strId).slideDown();
            $('#table' + strId).load('files.php');      
        },
        function () {
            $('#table' + strId).slideUp();
        }); 
    });//close mousemove function

---

任何帮助都将不胜感激。谢谢

问题在于，每次调用

clickToggle

时，您都在为元素注册一个新的

click

处理程序：

this.click(function() {...

在随后的每次单击中，您将添加另一个处理程序，并调用所有以前的处理程序。萧瑟

最好直截了当：

var showTable = function($table) {
    $table.slideDown();
    $table.load('files.php');
    $table.removeClass('hidden');
};

var hideTable = function($table) {
    $table.slideUp();
    $table.addClass('hidden');
};

$(document).click(function (e) {
    //get the mouse info, and parse out the relevant generated div num 
    var id = e.target.id;
    var strId = id.match(/\d$/)[0];
    var $table = $('#table' + strId);

    if ($table.hasClass('hidden')) {
        showTable($table);
    } else {
        hideTable($table);
    }
});

var showTable = function($table) {
    $table.slideDown();
    $table.load('files.php');
    $table.removeClass('hidden');
};

var hideTable = function($table) {
    $table.slideUp();
    $table.addClass('hidden');
};

$(document).click(function (e) {
    //get the mouse info, and parse out the relevant generated div num 
    var id = e.target.id;
    var strId = id.match(/\d$/)[0];
    var $table = $('#table' + strId);

    if ($table.hasClass('hidden')) {
        showTable($table);
    } else {
        hideTable($table);
    }
});