Question

<script>
    $("#text").on("change",function(){
        var id =  $(this).val();
        if(id!= ""){
            $('#test').rules('remove',  'required');
        }else{
            $('#test').rules('add',  'required');
        }
        debugger;
        SetIndicator(id);           
    });

    function SetIndicator(id){ do something..}
</script>

问题是，当我更改“ #text”时，它没有调用SetIndicator（id），但是当我刷新页面SetIndicator（id）时，它正常工作了

对于jsfiddle https://jsfiddle.net/76thdqcp/

Answer 1

问题在于更改后的事件仅在textinput的焦点变为“ off”后才被触发。将代码更改为keyup-event可以解决您的问题。

$("#text").on("keyup", function() {
  var id = $(this).val();
  if (id) {
    //$('#test').rules('remove', 'required');
  } else {
    //$('#test').rules('add', 'required');
  }
  SetIndicator(id);
});

function SetIndicator(id) {
  console.log('id', id);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text" />

Answer 2

$("#text").change(function(){
    var id =  $(this).val();
    if(id!= ""){
        $('#text').attr('style',  'color:red');
    }else{
        $('#text').attr('style',  'color:yellow');
    }
    SetIndicator(id);           
});

function SetIndicator(id){
  console.log(id); 
  $("#test").html("Its working");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<input type="text" id="text" />
<div id="test"></div>

尝试下面的代码。

 $("#text").change(function(){
    var id =  $(this).val();
    if(id!= ""){
        $('#text').attr('style',  'color:red');
    }else{
        $('#text').attr('style',  'color:yellow');
    }
    SetIndicator(id);           
});

function SetIndicator(id){
  alert("hi"); $("#test").html("Its working");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<input type="text" id="text" />
<div id="test"></div>

希望对您有帮助。

.on（“ change”，function（）{}不要在内部调用function

2 个答案: