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>