1、优化点击事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<button data-action="id1">新增按钮1</button>
<button data-action="id2">删除按钮2</button>
<button data-action="id3">按钮3</button>
<button data-action="id4">按钮4</button>
<script>
var log = function () {
console.log.apply(console, arguments)
}
var actionList = {
'id1': function () {
alert('id1=============>')
},
'id2': function () {
alert('id2===============>')
},
'id3': function () {
alert('id3===============>')
},
'id4': function () {
alert('id4===============>')
}
}
let $body = $('body')
$body.on('click', '[data-action]', function () {
//jQuery获取html标签自定义属性值或data值
let action_name = $(this).data('action')
let action = actionList[action_name]
// log(action)
// log($.isFunction(action))
if ($.isFunction(action)) {
action()
}
})
//页面需要新增一个按钮，做扩展
$body.append('<button data-action="id5">按钮5</button>')
$.extend(actionList, {
'id5': function () {
alert('id5============>')
}
})
</script>
</body>
</html>
参考
本文由博客一文多发平台 OpenWrite 发布！
點擊查看更多內(nèi)容
為 TA 點贊
評論
評論
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦