jQuery Проблемы с удалением обработчика событий с .off()

Question

Я попытался удалить обработчик событий с .off(), но он не работает.

Я хочу, чтобы удалить все обработчик событий из одного определенного входа:

<input type="file" id="file_upload" name="file_upload" size="50" /> 

Вот что я пробовал:

$('#form').on('keyup change', ':input', function() { 
    registerChange(); 
}); 
$('#form input[name=file_upload]').off(); 
$('#file_upload').off(); 

Answer 1

Вы можете использовать селектор not для кнопки загрузки файла

$('#form').on('keyup change', 'input:not([name=file_upload])', function() { 
 
    registerChange($(this).val()); 
 
}); 
 

 
function registerChange(value) { 
 
    // notice that typing into the upload textbox does not log anything to the console 
 
    console.log(value); 
 
} 
 

 
$('#form').on('click', 'input[name=file_upload]', function() { 
 
    alert('In Click Event Handler, Now Removing Myself'); 
 
    // here is how you can remove an event handler 
 
    $('#form').off('click', 'input[name=file_upload]'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form id="form"> 
 
    <input type="text" /> 
 
    <input type="text" /> 
 
    <!-- just changeing this to a textbox for demo --> 
 
    <input type="text" id="file_upload" name="file_upload" size="50" value="Choose file" /> 
 
</form>

Откройте окно консоли (CTRL + SHIFT + J в хроме) и введите во все текстовые поля. Обратите внимание, как только первые 2 текстовых поля пишут на консоль. Также обратите внимание, что последнее текстовое поле определяет обработчик щелчка, а затем удаляет его, поэтому предупреждение появляется только один раз.

Answer 2

Вы связывание события для формирования элемента. Поэтому для того, чтобы удалить его вам снова нужно использовать тэг формы:

// bind delegated events to form element 
$('#form').on('keyup change', ':input', function() { 
    registerChange(); 
}); 

// remove events later 
$('#form').off(); 

Вы, вероятно, путают с event delegation: это использование on метода придает события к элементу формы, где они захватываются после барботирования от детей :input.

Answer 3

Попробуйте это:

$('#file_upload').off('keyup change', ':input', function() 
{ 
    registerChange(); 
});