当jquery UI滑块移动时检测文本框的更改

detect textbox change when the jquery UI slider moves

本文关键字:文本 检测 UI jquery 移动      更新时间:2023-09-26

我有这个小提琴http://jsfiddle.net/48Hpa/,当我自己输入关键字时,它会自动计算总和,当我更改滑块时,文本框值会更改,但我看不到总和。为什么会这样?我怎样才能做到这一点?非常感谢。

$(document).ready(function(){
    $(function() {
        $( "#slider1" ).slider({
          range: "min",
          value: 36,
          min: 1,
          max: 36,
          slide: function( event, ui ) {
            $( ".amount1" ).val( ui.value);
          }
        });
        $( ".amount1" ).val($( "#slider1" ).slider( "value" ));
      });
    $(function() {
        $( "#slider2" ).slider({
          range: "min",
          value: 50000,
          min: 1,
          max: 50000,
          slide: function( event, ui ) {
            $( ".amount2" ).val( ui.value );
          }
        });
        $( ".amount2" ).val( $( "#slider2" ).slider( "value" ));
      });

    function writesum() {
      var months = $('.amount1').val();
      var credits = $('.amount2').val();
      var payment = Number(months) + Number(credits);
          $('.amount3').val(payment);
    }
    $(".amount1").on('input',function(){
        jQuery(writesum);
    });
    $(".amount2").on('input',function(){
        jQuery(writesum);
    });
});

滑块移动时只调用writesum()如何?

即。http://jsfiddle.net/48Hpa/1/

当您用代码更改输入字段的值时,您需要在输入字段上触发一个更改事件。

此外,我建议使用更改事件。

        $( "#slider1" ).slider({
         ...
          slide: function( event, ui ) {
            $( ".amount1" ).val( ui.value)
                           .trigger('change');
          }
        });
        $( "#slider2" ).slider({
          ...
          slide: function( event, ui ) {
            $( ".amount2" ).val( ui.value )
                           .trigger('change');
          }
    ...
    $(".amount1, .amount2").on('change', function() {
        writesum();
    });