js 动态添加 html 无法调用 js方法问题 解决方案

动态添加的 html 代码无法通过 onclick 方式调用 js 方法。
如：

<script>
$('#sync_error').append('<button onclick="get_position('+data['ret']['account_name']+')"> 失败重试：'+data['ret']['account_name']+'</button>');
</script>

上面的方式无法通过 onclick 方式调用 get_position() 方法，点击按钮会报 not define get_position 的错误。

解决方案，此方案也适用于多按钮情况：

<script>
// 容器标签，也就是要动态向其内部添加 html
var sync_error = $('#sync_error');

// 添加失败重试按钮, 并添加 account_id 属性
sync_error.append('<button account_id="'+data['ret']['account_name']+'"> 失败重试：'+data['ret']['account_name']+'</button>');

// 容器标签获取其内部的元素，如果点击空白则获取的是 null，所以要对获取的结果进行判断
sync_error.click(function(e) {
    // 获取内部的指定属性，不存在则是 null
    var account_id = e.target.getAttribute('account_id');
    if (account_id) { // 存在则直接调用 js
        get_position(account_id);
        // 点击后删除按钮
        e.target.parentNode.removeChild(e.target);
    }
});

function get_position(account_id) {
    // ...
}
</script>