javascript - 如何使用 Jquery(或 JS)选择动态创建的输入字段？

Question

此输入选择字段是动态生成的，选项将根据用户在先前字段中选择的内容而变化。

<select name="vehicle">
    <?php $loop = new WP_Query( array( 'post_type' => 'fleet') ); ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <option class="vehicle-option" value="<? the_title() ?>" <?= $_POST["vehicle"] ==                     the_title('', '', false) ? "selected" : "" ?>>
    <?php the_title(); ?>
    </option>
    <?php endwhile; wp_reset_query(); ?>
</select>

因为这些选项是动态生成的，所以我无法使用 Jquery 选择该字段。 (我可以使用 CSS 选择它，但我需要对此字段应用验证，因为它是用户必须选择的必填字段)。

下面的代码不会选择它，我也尝试过在字段及其周围添加 ID 和类标签，但都失败了。

$('select[name=vehicle]’)………

因为最终我也希望能够选择该字段内的选项；

$('select[name=vehicle]').change(function(){ 
    if($("select[name=vehicle] option:selected").val() !== "Vehicle preference"){
    //run function
    }
    else{
    //run function
    }
}

Answer 1

您可以使用event delegation 对于动态创建的元素:

$(document).on('change', 'select[name = vehicle]', function () {
    if ($(this).find("option:selected").val() !== "Vehicle preference") {
        //run function
    } else {
        //run function
    }
});