实现其他事件处理程序后的事件处理程序

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()); 
    }); 
});