如何觸發的onchange當頁面加載

Question

我想觸發更改事件當頁面加載我試圖做$("#formtype").change();，但它不工作

<div class="form-group"> 
    <select name="form" id="formtype" class="form-control"> 
    <option value="A">Form A</option> 
    <option value="B">Form b</option> 
</select> 

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript"> 
    $('#formtype').on('change', function() { 
    // alert(this.value); // or $(this).val() 
    if(this.value == "A") { 
     $('#form1').show(); 
     $('#form2').hide(); 
    } else { 
     $('#form1').hide(); 
     $('#form2').show(); 
    } 
    }); 
</script> 

Answer 1

不要試圖給DOM欺騙，以爲事件已經發生。如果你想在頁面加載時執行代碼，只需執行它。事情是這樣的：

// define the function 
var toggleElements = function() { 
    if($('#formtype').val() == "A") { 
     $('#form1').show(); 
     $('#form2').hide(); 
    } else { 
     $('#form1').hide(); 
     $('#form2').show(); 
    } 
}; 

// set the handler 
$('#formtype').on('change', toggleElements); 

// execute the function when the page loads 
$(document).ready(toggleElements); 

Answer 2

爲什麼不把你想要運行的代碼在一個函數中，然後調用該函數？像這樣將工作：

$('#formtype').on('change', function() { 
    doStuff(); 
}); 

function doStuff() { 
    if($('#formtype').val() == "A") { 
    $('#form1').show(); 
    $('#form2').hide(); 
    } else { 
    $('#form1').hide(); 
    $('#form2').show(); 
    } 
} 

$(document).ready(function() { 
    doStuff(); 

}) 

看到它在這裏工作：https://jsfiddle.net/5jLx6q8b/

Answer 3

嘗試執行文檔準備事件的功能在這個代碼：

$("#formtype").trigger('change'); 

Answer 4

您可以在事件

$('#formtype').on('change', function() { }).trigger("change"); 

或

的結合直接去做

$('#formtype').on('change', function() { }).change();