Назначение Обработчик события щелчка внутри KeyUp события вызывает событие щелчка, чтобы выстрелить несколько раз

Question

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

$('#newName, #newFrom').keyup(function (e) { 
    if ($('#newName').val() || $('#newFrom').val()) { 
     $('#add-person').click(function (e) { 
      //Handle event, includes adding a row to a table. 
      $('this').off(); 
     }); 
    } 
}); 

кажется как первое событие распространяется на второй, так как в итоге я получаю такое же количество строк в таблице, как и ключи, которые я набрал.

Я попытался добавить

e.stopPropagation(); 

Но без успеха.

Answer 1

$('this').off(); должен быть $(this).off();
также, вероятно, вы бы лучше пойти, используя input событие вместо keyup. Событие input будет срабатывать, даже если вы вставляете содержимое в свои поля.

все-таки я бы наоборот:

// (cache your selectors) 
var $newName = $("#newName"), 
    $newFrom = $("#newFrom"); 

// create a boolean flag 
var haveNewValue = false; 

// modify that flag on fields `input` 
$newName.add($newFrom).on("input", function() { 
    haveNewValue = ($.trim($newName.val()) + $.trim($newFrom.val())).length > 0; 
}); 

// than inside the click test your flag 
$('#add-person').click(function (e) { 
    if(!haveNewValue) return; // exit function if no entered value. 

    // do stuff like adding row to table 
}); 

Что было не так:

на каждом keyup вы были присваивающим новое (поэтому несколько) click события/сек на кнопку , но (исправлено:) $(this).off() был запущен только после фактического нажатия кнопки.

Также лучший способ использовать .on() и off.() (обратите внимание на разницу в использовании метода .click() и метод .on()) является:

function doCoffee() { 
    alert("Bzzzzzzzz...BLURGGUZRGUZRGUZRG"); 
} 

$("#doCoffeeButton").on("click", doCoffee); // Register "event" using .on() 

$("#bossAlertButton").click(function() { 
    $("#doCoffeeButton").off("click");  // Turn off "event" using .off() 
});