我在页面上有几个单选按钮和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());
});
我会提醒旧的跨度值。
如何实现呢?
最佳答案
好的,所以问题是调用.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());
});
});
关于javascript - 在其他事件处理程序之后实现事件处理程序,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19986655/