使用jQuery将事件附加到动态创建的选择

Question

我想将事件添加到动态创建的选择中并希望获得选项值.. 但困惑如何在动态创建的选择上触发事件...？

我知道我们可以使用jquery.live or jquery.on event，但为此我们需要适当的选择器/id

$(document).on( eventName, selector, function(){} );

我的小提琴：Demo Fiddle

html：

<select id="t1pl1" class="chosen-select" data-placeholder="Select player..." style="width:200px;">
    <option value="0"></option>
    <option value="11">Player 1</option>
    <option value="12">Player 2</option>
    <option value="13">Player 3</option>
</select>

Answer 1

演示：http://jsfiddle.net/4wCQh/23/

我认为您可以使用on 进行事件绑定，并且由于您有动态元素，因此您应该使用select 的父选择器进行事件绑定。

简单的解决方案是使用这个：

    $(document).on('change', 'select[id^="t1"]', function () {
        alert($(this).val());
    });

使用此代码进行更新：

$(document).on('mouseenter', 'li.active-result.highlighted', function (e) {
   $("#pid").html($("option").eq($(this).data("option-array-index")).val());
});

而不是你的旧代码。

说明：

change 是事件，select[id^="t1"] 是所有 id 以 t1 开头的选择的 css 选择器。请参阅Attribute Selectors 了解更多信息。此外，您可以使用$(this).val() 获取select 的当前值

Answer 2

为避免与 ID 混淆，请将您的侦听器附加到选择器本身。

// Do your selectbox creation...
// var selector = whatever...

$( selector ).on( eventName, function( event ){
    console.log( 'Event was triggered by', $( event.target ) );

    // do stuff with your event.target, like getting value and such.
});