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 핸들러 번째 인수 함수를 기대한다. 인수를 인수로 전달하지 않고 함수를 호출하고 있습니다. 호출 된 함수는 아무 것도 반환하지 않으므로 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'));