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。您还可以使用select

获取$(this).val()的当前值

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.
});

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

2 个答案: