$(document).ready 和 Window onload 导致事件触发两次答案

【问题标题】：$(document).ready and Window onload causing events to fire twice$(document).ready 和 Window onload 导致事件触发两次
【发布时间】：2013-08-05 17:25:56
【问题描述】：

我正在尝试修复我的 rails 3.2.13 应用程序中的一个错误，即每当我准备好文档或调用窗口加载时，某些点击事件会被触发两次。它似乎只发生在我发出 ajax 调用之后。如果我隐藏提交，然后在没有 ajax 调用的情况下添加代码，它就可以工作。我可以阻止它的唯一方法是从 JS 文件中删除准备好的文档，但我需要它来让一些 JQuery 正常工作。我认为这可能是资产管道的问题，但不确定。

$(document).ready(function () {

$('.first_panel_photos').fadeIn('slow');

var ajax;
var user_kits = [];
var photo_load_batch_html;
var kits_added = 0;



$.get('/get_kits', function (data) {
    for (var i = 0; i < data.length; i++) {
        photos = data[i].photos;
        links = [];
        for (var n = 0; n < photos.length; n++) {
            link = data[i].photos[n].photo_url;
            links.push(link);
        }
        user_kits.push(new Kit(data[i].kit_name, links));
        kit_to_add = $('<button class="btn btn-info added_kit" id=' + (kits_added - 1) + '>Kit</button>');
        $('.cart').append(kit_to_add.fadeIn());
        update_total_price();

    }

});




//Listeners
$('.first_panel_photos').on('click', 'img', function (event) {
    event.stopPropagation();

    add_to_kit(this.src);
    if ($('.kit_photos_row_3').find('img').length === 3 && $('.buybtn').find('button').length === 0) {
        $('.buybtn').append($('<button class="btn btn-info add_to_cart">Add to cart</button>').fadeIn());
        $('.buybtn').append($('<input type="text" class="kit-name" placeholder="name the kit">').fadeIn());
    }
});

$('.kit_photos_row_1, .kit_photos_row_2, .kit_photos_row_3').on('click', 'img', function (event) {
    event.stopPropagation();
    event.preventDefault();
    remove_from_kit(this, function (img_row) {
        if ($(img_row).hasClass('kit_photos_row_1')) {
            shift_photo_from_class('.kit_photos_row_2', function () {
                shift_photo_from_class('.kit_photos_row_3');
            });
        } else if ($(img_row).hasClass('kit_photos_row_2')) {
            shift_photo_from_class('.kit_photos_row_3');
        }
    });
    if ($('.add_to_cart').length !== 0) {
        $('.add_to_cart').remove();
        $('.kit-name').remove();


    }
});
});

【问题讨论】：

你已经包含了很多代码。您能剔除不适用于该问题的代码吗？
具有挑战性的代码格式和令人困惑的变量名称可以为您做到这一点。尝试将代码粘贴到小提琴中，然后（可能重复）单击“TidyUp”和“JSHint”，看看在清除建议时是否有帮助。
欢迎意大利面怪物！
感谢@MarkSchultheiss，稍微清理了一下并删除了额外的代码。 JS 新手，需要提高我的可读性！

标签： javascript jquery dom ruby-on-rails-3.2

【解决方案1】：

找出事件被触发两次的问题。我正在通过浏览器中缓存的我的应用程序的预编译版本查看页面。使用 rake assets:clean 清理资源后，刷新页面时按住 shift 键，JS 开始正常工作了。

【讨论】：