Using On Keyup Function For Live

Question

I want to this code to execute after an ajax-call (means .live) How should I change the code?

var el=document.getElementById('txt_url');
el.onkeyup=function(){
    var str=el.value;
    if(str=='') return;   
    if(str.indexOf('http://')==-1 && str.length >= 7)
    el.value='http://'+str;   
}

Answer 1

You need to set the success handler:

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    var el=document.getElementById('txt_url');
    el.onkeyup=function(){
        var str=el.value;
        if(str=='') return;   
        if(str.indexOf('http://')==-1 && str.length >= 7)
        el.value='http://'+str;   
    }
  }
});

jQuery Ajax Documentation

Answer 2

To live-bind a handler to an element use the jQuery .on() method. (As of jquery 1.7)

$("body").on("keyup","#txt_url",function(){
   // your code
});

It replaces the deprecated .live() handler.

Also, if you use jQuery, I'd suggest you to use it consistently - also for element-selection and handler-binding.

Alternatively you could bind the handler in the success function but I prefer to do the eventbinding in a more consistent way.