實現其他事件處理程序後的事件處理程序

Question

我在頁面上有幾個單選按鈕和span元素。當我單擊某個單選按鈕時，Onchange事件處理程序會觸發並更改span元素的文本。我沒有訪問該事件處理程序，所以我無法更改它。 我需要編寫自己的腳本（Onchage事件處理程序），它將在其他腳本（如上所述）更改DOM中的span元素之後更改span元素的文本。 實施例： 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> 

使用Javascript：

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

我無法改變上述的JavaScript代碼。 我需要編寫onChange事件處理程序來更改跨度的html取決於上面的腳本所創建的新值。如果我只寫：

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

我會提醒老的值的跨度。 如何實現這個？

Answer 1

確定所以問題是調用.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()); 
    }); 
});