Методы on/live/bind в цикле

Question

У меня есть несколько входов, которые я хотел бы обеспечить, чтобы были только целые числа. Новые браузеры понимают type = "number", но мы не живем в идеальном мире. Поскольку эти поля выбрасываются через несколько мест в системе, я хотел бы разработать решение JQuery (с использованием версии 1.7.1), которое я могу перечислить в массиве, и пропустить их на DOM и получить связь. Примечание, что некоторые из этих входов поступают из запросов AJAX, поэтому стандартный метод «on» не работает.

$(document).live("keyup", "#myInput", function(){}) 

Работает нормально, однако не работает, если в петле.

Example fiddle.

Вышеупомянутая скрипка показывает элементы, работающие как ожидалось, но измените «.on» на «.live» или «.bind», и событие перестает связываться должным образом.

Итак, чтобы мой код был чистым и не требовал вручную связывать десятки этих элементов, как я могу заставить «.live» работать в цикле?

var arr = [ 
    $("#myInput"), 
    $("#differentInput"), 
    $("#strangeText"), 
    $("#moreUniqueValues") 
] 


function callBack($el){ 
    return function(){ 
    $("div.result").text("you typed in "+ $el.selector); 
    } 
}; 

$(function(){ 
    for(var i = 0; i < arr.length; i++){ 
    $(document).on("keyup", arr[i].selector, callBack(arr[i])); 
    $("div.loopText").append("<div>"+ arr[i].selector + " - has been bound </div>") 
    }; 
}); 

Answer 1

Оба метода bind() и live() являются устаревшими.

bind(): С JQuery 3.0, .bind() является устаревшим. Он был заменен методом .on() для привязки обработчиков событий к документу с jQuery 1.7, поэтому его использование было уже обескуражено.

live(): В отношении jQuery 1.7 метод .live() устарел. Используйте .on() прикрепить обработчик событий ..

Вы можете использовать массив selectors так вы не нуждаетесь ни в петле, чтобы прикрепить событие ко всему селектору, используя силу множественного выбора (с помощью запятой) arr.join(','):

var arr = ["#myInput","#differentInput","#strangeText","#moreUniqueValues"] 
 

 
function callBack(){ 
 
    $("div.result").text("you typed in #"+ this.id); 
 
}; 
 

 
$(function(){ 
 
    $(document).on("keyup", arr.join(','), callBack); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="myInput" type="text" name="blah" value="" /> 
 
<input id="differentInput" type="text" name="blah" value="" /> 
 
<input id="strangeText" type="text" name="blah" value="" /> 
 
<input id="moreUniqueValues" type="text" name="blah" value="" /> 
 

 

 
<div class="result"> 
 
</div> 
 
<br/> 
 
<div class="loopText"> 
 
</div>