Jquery .on() 事件在同一个类元素上多次触发，即使使用 .off()答案

【问题标题】：Jquery .on() Event Firing Multiple Times on same Class Elements even on using .off()Jquery .on() 事件在同一个类元素上多次触发，即使使用 .off()
【发布时间】：2023-04-03 18:25:01
【问题描述】：

我正在创建即时网格布局，其中一个类将附加到单击的类的元素上，输入字段中的一些手动文本将插入该元素中。

当我点击元素时，它会被激活并将 html 传递给该元素，但在点击第二个元素时，.on() 会触发多次，并且所有元素都会获得相同的 html 数据而不是单独的数据。

我试过 .off() 和 .stopPropagation() 等

function changeModal (object) {
    $('#myModal').modal('show');
    $('#myModalLabel').text('Enter Seat Number');
    $('.addSeatNumber').click(function () {
        var seatNumber = $('#seatNumberHolder').val();
        $(object).addClass('activated').attr('data-seatNumber',seatNumber).text(seatNumber);
        $('#myModal').modal('hide');
    });
}
function pushSeat (object) {
    var object = '#'+object.attr('id');
    if($(object).hasClass('activated')) {
        $(object).removeClass('activated').html('');
    }
    else {
        changeModal(object);
    }
};
$(document).on('click', '.seat',function(e) {
        var id = $(this);
        e.stopPropagation();
        pushSeat(id);
});


function CreateTheatre () {
    this.rows = 20, this.columns = 10;
    this.seatRowName  = function (a) {
        return String.fromCharCode(a.charCodeAt(0) + 1);
    }
    this.render = function () {
        var layout = '';
        var seatRowStart = 'A';
        for (var i = 0; i < this.columns; i++) {
            layout += '<div class="seatRow">'+seatRowStart+'</div>';
            if (seatRowStart == 'Z') {
                seatRowStart = '`';
            }
            seatRowStart = this.seatRowName(seatRowStart);
            for (var j = 0; j < this.rows; j++) {
                layout += '<div id="'+seatRowStart+(j+1)+'" class="seat"></div>';
            }
            layout += '<div class="clear"></div>';
        }
        $('.seatContainer').html(layout);
    };
};

【问题讨论】：

您也可以发布您的 HTML 吗？
$('.addSeatNumber').click(function () { 为集合中的每个元素添加一个单击处理程序。执行 10 次，每个元素都有 10 个点击处理程序；）
我在创建 Class CreateTheatre() 时更新了 HTML
我解决了这个问题。谢谢您的回答。特别是@vohuman。感谢您的提示。
你可以使用live或on事件来代替点击@Vohuman给出的提示

标签： javascript jquery

【解决方案1】：

我将我的 $('.addSeatNumber').click(function(){ 从模态框中移出并使用全局变量来存储最终元素 ID。

var myHack;
function changeModal (object) {
    $('#myModal').modal('show');
    $('#myModalLabel').text('Enter Seat Number');
    myHack = object;
}
function pushSeat (object) {
    var object = '#'+object.attr('id');
    if($(object).hasClass('activated')) {
        $(object).removeClass('activated').html('');
    }
    else {
        changeModal(object);
    }
};


$(document).on('click', '.seat',function(e) {
        var id = $(this);
        e.stopPropagation();
        pushSeat(id);
});
$('#addTheatre').click(function () {
    saveTheatre();
})
$('.addSeatNumber').click(function () {
    var seatNumber = $('#seatNumberHolder').val();
    $(myHack).addClass('activated').attr('data-seatNumber',seatNumber).text(seatNumber);
    $('#myModal').modal('hide');
});

【讨论】：