Блог

Главная - Вопросы по программированию - Почему jquery запускается постепенно с каждым щелчком мыши?

Почему jquery запускается постепенно с каждым щелчком мыши?

#html #jquery

#HTML #jquery

Вопрос:

В jquery есть простая функция. Я печатаю входящие данные, оставленные с каждым щелчком мыши. Но каждый раз, когда я нажимаю, предыдущие идентификационные данные также записываются в консоль.

 data_id: 38
-------------------
data_id: 38
data_id: 45
-------------------
data_id: 38
data_id: 38
data_id: 45
data_id: 38
data_id: 38
data_id: 45
data_id: 45
data_id: 56

Как указано выше.

     $('body').on('click', 'input.data_update', function (e){
        
        var data_id  = $("input[name='data_id']").val();
        
        function update(data_id){
            console.log("data_id: "   data_id);
        }
        
        $(document).on("click", "input.form_button_1", function (e){
            update(data_id);
        });
        
        var single_click = true;
        $(document).on("keydown", function (e){
            if (!single_click) return;
            var key = e.which;
            if(key == 13 || key == 27){
                update(data_id);
            single_click = false;
            }
            
        });
        
    });

Когда я использую .off (), чтобы предотвратить это, я не могу распечатать какие-либо данные

         $(document).off().on("click", "input.form_button_1", function (e){
            update(data_id);
        });
        
        $(document).off().on("keydown", function (e){
            var key = e.which;
            if(key == 13 || key == 27){
                update(data_id);
            }
        });

Он отлично работает, когда я использую window вместо var. Но как я могу решить это без использования window?

 var data_id  = $("input[name='data_id']").val();
window.data_id  = $("input[name='data_id']").val();

Комментарии:

1. Вы связываете события внутри привязок событий. Мне кажется логичным, что вы увеличиваете события щелчка. Вам это сойдет с рук при использовании one() . Лучшим подходом было бы передавать данные из элементов => data_id должны быть извлечены внутри input.form_button_1 события щелчка и помещать привязки событий рядом друг с другом, не вставлять их.

Ответ №1:

Все ваши обходные пути в сторону, давайте сначала попробуем реорганизовать вашу основную функциональность, связав события отдельно:

 /* 1. action to take after events are triggered */
function updateId(id){
    console.log('update id: '   id);
}

function updateEl(el){
    console.log('update el: '   el.value);
    // do something with this element
    // just trivial functionality below
    $(el).data('clicked', true);
    $(el).attr('data-clicked', true);
    $(el).addClass('disabled');
}

/* 2. defining events */
$(document.body).on('click', 'input.data_update:not(.disabled)', function (e){
    var data_id  = $('input[name="data_id"]').val(); // unique element? relative to clicked element?

    updateId(data_id);
    updateEl(e.currentTarget);
});

$(document.body).on('click', 'input.form_button_1', function (e){
    updateEl(e.currentTarget);
});
    
$(document.body).on('keydown', 'input.data_update:not(.disabled)', function (e){
    var key = e.which || e.keyCode;

    if (key === 13 || key === 27){
        updateEl(e.currentTarget);
    }        
});

Так что не уверен, чего вы пытаетесь достичь с updateId помощью или как выложен ваш HTML. Это поможет, если вы также опубликуете это.

Если, например, вы хотите обновить только один раз… вы можете выбрать только те элементы, которые не отключены.

Метки: