Methods on / live / bind in a loop

Question

I have several inputs that I would like to ensure that are whole numbers only. Newer browsers understand type="number", but we don't live in a perfect world. Because these fields are thrown across several places in the system I would like to devise a JQuery (using version 1.7.1) solution that I can list them in an array and have them loop through on DOM ready and get bound. Note that some of these inputs come in from AJAX requests so the standard "on" method does not work.

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

Works fine, however, does not work when within a loop.

Example fiddle.

The above fiddle shows the elements working as expected, but change the ".on" to ".live", or ".bind" and the event no longer gets bound properly.

So to keep my code clean and not having to manually bind dozens of these elements how can I get ".live" to work within the loop?

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>")
  };
});

The `live()` method is deprecated: http://api.jquery.com/live/ — Scott Marcus, Dec 02 '16 at 16:41
.on works just like .live (but more efficiently,) if used properly. [Read the documentation](http://api.jquery.com). — Kevin B, Dec 02 '16 at 16:41
also note that .on replaces .bind, which also has been deprecated. — Bindrid, Dec 02 '16 at 16:42
Thank you for the speedy reply. I am using JQuery 1.71 to include IE8 :( so I am still working with all the deprecated methods. I will also edit the posting to show the code here as well. — googabeast, Dec 02 '16 at 16:45
The fiddle works, but as I mentioned with some of the inputs I am needing to target come in from AJAX calls, so ".on" does not work for them. — googabeast, Dec 02 '16 at 16:48
@googabeast yes, it does. that's precisely what that syntax is meant for. If it isn't working for you, it's for some other reason. — Kevin B, Dec 02 '16 at 16:51
Possible duplicate of [Assign click handlers in for loop](http://stackoverflow.com/questions/4091765/assign-click-handlers-in-for-loop) — Heretic Monkey, Dec 02 '16 at 16:52

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

The both methods bind() and live() are deprecated.

bind() : As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged.

live() : As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers..

You could use an array of selectors so you don't need no loop to attach event to all selector using the power of multiple selector (using comma separator) 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>

Very minor thing, but without the OP's `$("div.loopText").append(...` operation, you might as well take the `.on("keyup", ...` binding of the ready handler, since the `document` is always available. That way the handlers are bound without delay. — , Dec 02 '16 at 17:01
Solved. So really my problem was just trying to run the elements through a loop? — googabeast, Dec 02 '16 at 17:05

Methods on / live / bind in a loop

1 Answers1