jQuery:如何处理span的更改文本

Ari*_*ian 36 javascript jquery javascript-events

我正在使用jQuery并且我希望在一个范围内显示一些计算(称为span1),并且我希望当span1更改的文本对其值进行一些计算并在其他跨度中显示时(称为"span2,span3,...").我如何处理跨度的文本更改?

谢谢

Ruc*_*tel 28

默认情况下,Span没有"更改"事件.但您可以手动添加此事件.

聆听跨度的变化事件.

$("#span1").on('change',function(){
     //Do calculation and change value of other span2,span3 here
     $("#span2").text('calculated value');
});
Run Code Online (Sandbox Code Playgroud)

无论你在哪里更改span1中的文本.手动触发更改事件.

$("#span1").text('test').trigger('change'); 
Run Code Online (Sandbox Code Playgroud)


SpY*_*3HH 15

您可以使用更改span1文本的函数来更改其他文本.

作为一种解决方法,如果你真的希望它有一个change事件,那么不要将文本设置为跨度1.而是在jQuery中设置一个输入变量,向它写一个change事件,并且当你更改span1的文本时...而是更改输入变量的值,从而触发更改事件,如下所示:

var spanChange = $("<input />");
function someFuncToCalculateAndSetTextForSpan1() {
    //  do work
    spanChange.val($newText).change();
};

$(function() {
    spanChange.change(function(e) {
        var $val = $(this).val(),
            $newVal = some*calc-$val;
        $("#span1").text($val);
        $("#spanWhatever").text($newVal);
    });
});
Run Code Online (Sandbox Code Playgroud)

虽然我真的觉得这种"解决方法"虽然在创建简单更改事件的某些方面很有用,但是非常过度扩展,并且您最好在更改span1的同时对其他跨度进行更改.


小智 6

在这里找到了解决方案

假设您有 span1,因为<span id='span1'>my text</span>
可以使用以下命令捕获文本更改事件:

$(document).ready(function(){
    $("#span1").on('DOMSubtreeModified',function(){
         // text change handler
     });

 });
 
Run Code Online (Sandbox Code Playgroud)