다른 이벤트 핸들러 다음에 이벤트 핸들러를 구현하십시오.

Question

페이지에 라디오 버튼과 스팬 요소가 거의 없습니다. 라디오 버튼을 클릭하면 Onchange 이벤트 처리기가 스팬 요소의 텍스트를 변경하고 텍스트를 변경합니다. 해당 이벤트 처리기에 액세스 할 수 없으므로 변경할 수 없습니다. 위에서 설명한 다른 스크립트가 DOM의 span 요소를 변경 한 후에 span 요소의 텍스트를 변경하는 자체 스크립트 (Onchage 이벤트 핸들러도)를 작성해야합니다. 예 : HTML :

<div> 
<input type="radio" name="somename" value="1.232" checked="checked">1.232 
<input type="radio" name="somename" value="2.556">2.556 
<input type="radio" name="somename" value="3.232">3.232 
<input type="radio" name="somename" value="4.865">4.865 
</div> 
<span id="change">1.232</span> 

자바 스크립트 :

$('div input:radio').change(function(){ 
    //some logic here 
    //calculation of value of the varaiable 'new_value' is encapsulated 
    //new_value = ..... 
    $(#change).html(new_value); 
}); 

나는 위의 자바 스크립트 코드를 변경할 수 없습니다. 스팬의 html을 변경하기 위해 onChange 이벤트 핸들러를 작성해야합니다. 위의 스크립트는 새로운 값을 사용합니다. 방금 쓰는 경우 :

$('div input:radio').change(function(){ 
    alert($(#change).html()); 
}); 

나는 스팬의 값이 예기치 않게 나타날 것입니다. 이것을 구현하는 방법은 무엇입니까?

Answer 1

OK 문제가 .html() (실제로이 이벤트에서 호출해야 할 것으로 예상되는) 이벤트를 트리거하지 않기 때문에 문제가 발생하지 않도록 jQuery를 확장해야합니다. 이 시도 할 수 있습니다 수신 할 수 있습니다 : 코드없이 (demo)

(function ($) { 
    // create a reference to the old `.html()` function 
    var htmlOriginal = $.fn.html; 

    // redefine the `.html()` function to trigger an event 
    $.fn.html = function (html) { 
     var ret = htmlOriginal.apply(this, arguments); 
     //if ret is a String then there is no event to trigger 
     if(typeof ret !== "string") { 
      ret.trigger('html-change'); 
     } 
     return ret; 
    } 
})(jQuery); 

$(function() { 
    $('div input:radio').change(function() { 
     var v = $(this).val(); 
     //Original and magical value 
     setTimeout(function() { 
      //Just doing some async stuff to prove that these are decoupled 
      $('#change').html(v); 
     }, 500); 
    }); 

    $('#change').on('html-change', function() { 
     //Now just listen to the html-change event which will be triggered any time .html() is called even that call was made by previously unmodified code) 
     alert($(this).html()); 
    }); 
});