jquery触发事件的一个问题

Question

先上代码

/**
 * Created by Ruise on 2016/8/16.
 */
$(function () {
    $('#add-menu').click(function(){
        add_wechat_menu();
    })
    $('#wecaht_menu_table').on('change','select',function (e) {
        var action_num = $(this).attr('value');
        if(action_num == 1) {
            var _html = '<button id="select-message">选择信息</button>';
            $('td#menu-action').html(_html);
        }else {
            var _html = '<button id="select-message">选择转跳页</button>';
            $('td#menu-action').html(_html);
        }
    })
})


function add_wechat_menu()
{
    var html = '<tr>'
        +'<td><input name="sort" type="text"></td>'
        +'<td><input name="name" type="text"></td>'
        +'<td><select id="select-action"><option selected value="1">发送信息</option><option value="2">跳转页面</option></select></td>'
        +'<td id="menu-action"><button id="select-message">选择信息</button></td>'
        +'<td><input type="checkbox" checked></td>'
        +'<td><a id="delete-menu" class="btn btn-danger btn-sm" href="javascript:void(0)"><i class="fa fa-trash-o"></i> 删除</a></td>'
        +'</tr>';
    $('tbody#wechat_menu_table').append(html);
}

问题：
现在是change事件触发了，但是触发了一次之后，再触发就没效果了。请问是哪里问题？谢谢各位大神

Answer 1

动态添加的 DOM 需要使用 事件委托

$('#wecaht_menu_table').on('change','select',function(e){
    console.log($(this).val());
});

Answer 2

难倒不是onchange么

Answer 3

你的dom是后加上去的，需要使用jQuery on事件(事件委托)。 把click事件用on包起来

Answer 4

文档加载完select元素还未生成，这时你直接在元素上绑定change事件是无效的，可以用on方法绑定，无论元素是否生成绑定的事件都会生效。

Answer 5

你对比下这两者的区别就知道问题所在了：

$('#wecaht_menu_table').on('change','select',function (e) {})

$('tbody#wechat_menu_table').append(html);