jquery - 从查询中创建的元素 id 调用新函数

Question

在创建从 jQuery 中的前一个选择标签调用的新 html 选择标签时遇到问题。

所以我开始：

$('#tab11').click(function() {

    var columns = [
        {val:'id', text:'id', id:'id'},
        {val:'display_name', text:'display_name', id:'display_name'},
        {val:'short_name', text:'short_name', id:'short_name'}
    ];  

    $('#columns').html('');
    $('#condition').html('');

    var sel = $('<select>').appendTo('#columns')
                           .css({backgroundColor:'#8B0000',
                                 color:'white',
                                 border:'inset 1px',
                                 borderColor:'#8B0000',
                                 width:'130'});

    $(columns).each(function() {
       sel.append($("<option>").attr({value:this.val, id:this.id})
                               .text(this.text)); 
    });

});

直到这里一切正常，所以现在我想调用一个函数

$('#id').click(function() {
    // some code here
});

等于#id我在上面函数中创建的选项标签中的 id。我的问题是这个功能不是通过单击带有id='#id'等的选项来执行的。

我究竟做错了什么？

感谢所有试图帮助我的人。干杯。

Answer 1

在选择时使用change事件，我猜点击事件不适用于option元素。

演示

$(function () {
    $('#columns').html('');
    $('#condition').html('');

    var sel = $('<select>').appendTo('#columns').css({
        backgroundColor: '#8B0000',
        color: 'white',
        border: 'inset 1px',
        borderColor: '#8B0000',
        width: '130'
    }).change(handleChange);

    $(columns).each(function () {
        sel.append($("<option>").attr({
            value: this.val,
            id: this.id,

        }).text(this.text))
    });
});

function handleChange() {
    alert($(this).val());
}