2017-02-25 48 views
2

這是我的代碼Jquery的更改事件不triggring

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>DDL change </title> 
    <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> 
    <script> 
     $(document).ready(function() { 
      BindState(); 
      doit(); 
      $('#ddlState').on('change', function() { //this method is not triggering.. 
       $('.ddlCity').val(parseInt(4)).change(); 
      }); 
     }); 
     function BindCity() { 
      $('.ddlCity').append('<option value="1">one</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option>'); 
     }; 
     function BindState() { 
      $('#ddlState').append('<option value="1">one</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option>'); 
     }; 
     function doit() { 
      $('#ddlState').val(parseInt(3)).change(); 
     }; 
    </script> 
</head> 
<body> 
    <div> 
     <select id="ddlState" onchange="BindCity()"> 
     </select> 
    </div> 
    <div> 
     <select class="ddlCity"></select> 
    </div> 
</body> 
</html> 

上改變事件不是動態觸發,如果我改變下拉手動事件將觸發.. 好心給我解釋一下是什麼問題

回答

1

你的問題是,change()不會觸發一個事件,它訂閱一個事件。

您正在尋找jQuery#trigger

然而,在這種情況下,我會建議只是邏輯移動到另一個功能,您可以隨時調用。我已將它命名爲adjustCity,但我相信你可以爲它提供更好的描述。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title>DDL change </title> 
 
    <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> 
 
    <script> 
 
     function adjustCity() { 
 
      $('.ddlCity').val(4) 
 
     } 
 
     $(document).ready(function() { 
 
      BindState(); 
 
      $('#ddlState').on('change', adjustCity); 
 
      doit(); 
 
     }); 
 
     function BindCity() { 
 
      $('.ddlCity').append('<option value="1">one</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option>'); 
 
     }; 
 
     function BindState() { 
 
      $('#ddlState').append('<option value="1">one</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option><option value="5">Five</option>'); 
 
     }; 
 
     function doit() { 
 
      $('#ddlState').val(3).trigger('change') 
 
      adjustCity() 
 
     }; 
 
    </script> 
 
</head> 
 
<body> 
 
    <div> 
 
     <select id="ddlState" onchange="BindCity()"> 
 
     </select> 
 
    </div> 
 
    <div> 
 
     <select class="ddlCity"></select> 
 
    </div> 
 
</body> 
 
</html>

編輯:感謝AHBagheri提醒我的移動電話doit()