onchange函数没有在自定义wordpress插件中被触发

Question

我在自定义Wordpress插件中的外部js文件中调用onchange（）函数时遇到问题。 脚本入队

function ajaxschool_enqueuescripts() 
{ 
    wp_enqueue_script('ajaxschool', ASSFURL. '/js/ajaxschool.js', array('jquery')); 
    wp_localize_script('ajaxschool', 'ajaxschoolajax', array('ajaxurl' => admin_url('admin-ajax.php'))); 

} 

add_action('wp_enqueue_scripts', ajaxschool_enqueuescripts); 

这是我HTML代码

echo '<div id="HCS-qsCityWrap" class="HCS-qsFieldWrap">'; 
    global $wpdb; 
    $city_results = $wpdb->get_results ("SELECT * from wp_gj73yj2g8h_hillsborough_city_list;"); 
    echo '<select id="city_id" name="city_name" class="HCS-qsInput HCS-qsSelectInput">'; 
    echo '<option value="">Choose a City</option>'; 
    foreach ($city_results as $result) { 
    echo '<option value="'.$result->city_id.'">'.$result->city_name.'</option>'; 
    } 
    echo '</select>'; 
    echo '</div>'; 

的jQuery ajaxschool.js代码

jQuery(document).ready(function($){ 
$('#city-id select').on('change', function(){ 
    alert("Function Called"); 
}); 
}); 

Answer 1

选择'#city-id select'表示：

找到某个元素的ID为city-id。然后在它的后代中找到一个<select>元素。

但是你的<select>已经有ID city-id。因此在<select>内找到<select>是无用的。只需将您的选择器降至：

$('#city-id').on('change', function(){ 
    alert("Function Called"); 
}); 

Answer 2

请尝试这样。

jQuery(document).ready(function($){ 

    $(document).on('change','#city_id', function(){ 
     alert("Function Called"); 
    }); 

}); 

Answer 3

从你给出的HTML代码，选择的ID city_id没有city-id。

所以jQuery的必须是

jQuery(document).ready(function($){ 
    $('#city_id').on('change', function(){ 
     alert("Function Called"); 
    }); 
});