Question

<select id="a">
    <option>Please Select</option>
    <option value="1">hello</option>
</select>
<div id="second_select"></div>

<script>
    $( '#a' ).change(function() {
    var data='<select id="b"><option>Please Select</option><option value="1">hello hello</option></select>';
        $('#second_select').html(data);
    });
</script>
<script>
    $( '#b' ).change(function() {
    alert('hello');
    });
</script>

Sample on JSFiddle

这只是一个样本。

*第二个菜单是从ajax post成功产生的，我认为这是无关的。

任何评论都表示赞赏。提前谢谢。

Answer 1

您应该在创建时将事件绑定到元素#b，而不是在加载DOM时。

<script>
    $( '#a' ).change(function() {
        var b = $('<select>',{'id':'b'}).change(function() {
            alert('hello');
        }); 
        $(b).append($('<option>').text('Please Select'));
        $('#second_select').append(b);
    });
</script>

Answer 2

在第一个onChange-Listener的回调中设置第二个eventListener。否则，将eventListener设置为尚不存在的DOM元素。

$( '#a' ).change(function() {
    var data='<select id="b"><option>Please Select</option><option value="1">hello hello</option></select>';
        $('#second_select').html(data);
                $( '#b' ).change(function() {
                alert('hello');
                });
});

条件选择菜单第二次更改不会触发

2 个答案: