jQuery：$（ "＃id"）が関数で機能しない

Question

jQuery関数に問題があります。

このコードは動作します：

$("input.read_picture").on('keyup', function() { 
     $("#load_picture").attr('src', $(this).val()); 

     $("#load_picture").error(function(){ 
      $(this).attr('src', 'http://www.rnc-ci.net/images/joomlart/demo/default.jpg'); 
     }); 

     $("#show_picture").css('display', 'block'); 
    }); 

しかし、私はない私のjQueryのイベントに私の機能を保存したいとき、それは動作しません。何も表示されません。ここで

は動作しないコードは、次のとおりです。あなたの助けのための

function changePicture(url) { 
     $("#load_picture").attr('src', url); 

     $("#load_picture").error(function(){ 
      $(this).attr('src', 'http://www.rnc-ci.net/images/joomlart/demo/default.jpg'); 
     }); 

     $("#show_picture").css('display', 'block'); 
    } 

    $("input.read_picture").on('keyup', changePicture($(this).val())); 

ありがとう！

Answer 1

これ、

$("input.read_picture").on('keyup', changePicture($(this).val())); 

はすぐハンドラがロードされる関数を呼び出します。

は、コールバックを使用し

$("input.read_picture").on('keyup', function(){ 
    changePicture($(this).val()) 
}); 

Answer 2

jQuery.onハンドラは、2番目の引数としての機能を期待しています。 functionを引数として渡しません。呼び出された関数は何も返さないので、undefinedが関数handlerとして渡されています。

関数を呼び出す代わりに、関数定義を保持する関数名を渡すだけです。ファンクション本体の値には、this.valueまたは$(this).val()という名前でアクセスできます。thisは、イベントが呼び出されるDOM-Elementを指します。

function changePicture() { 
    var url = this.value; 
    $("#load_picture").attr('src', url); 
    $("#load_picture").error(function() { 
    $(this).attr('src', 'http://www.rnc-ci.net/images/joomlart/demo/default.jpg'); 
    }); 
    $("#show_picture").css('display', 'block'); 
} 

$("input.read_picture").on('keyup', changePicture); 

またはあなたの現在の実装で、changePicureはkeyup

function changePicture(url) { 
    return function() { 
    $("#load_picture").attr('src', url); 
    $("#load_picture").error(function() { 
     $(this).attr('src', 'http://www.rnc-ci.net/images/joomlart/demo/default.jpg'); 
    }); 
    $("#show_picture").css('display', 'block'); 
    }; 
} 

$("input.read_picture").on('keyup', changePicture('ANY_VALUE AS $(this).val() will not wors due to invalid context of this'));