活用clone和trigger函数，点击按钮原有事件不触发，之后再触发原有事件
需求：
网站开发完毕了，然后产品说要在原来的’确认按钮’点击后加一个’弹窗’提醒用户一些注意事项，在用户点击弹窗里面的’同意按钮’后再执行原来’确认按钮’
里面绑定的事件。需求看起来很简单，但是有一个要求不能在原来代码上改，只能引入一个js文件和一个css文件。
思路：
将’确认按钮’clone出来，然后将它隐藏，然后将clone好的按钮放在原来’确认按钮’的位置上（用户看不出来）,当用户点击clone按钮后，触发绑定在clone按钮上的事件，将弹窗显示出来；
当用户点击弹窗中的’同意按钮’后，在用trigger()来触发隐藏中’确认按钮’的原有事件。
下面是一个简单的案例，复杂的我也做过，这方法可行。
<html>
<body>
<button id="btn">确认按钮</button>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$('#btn').on('click',function(){// 原来按钮中的事件，假设里面十分复杂
alert("原有事件");
})
var cloneBtn = $('#btn').clone(false);// 克隆btn按钮，但是不要它之前绑定的事件
$('#btn').hide();// 将原来的btn隐藏
$(cloneBtn).insertBefore($('#btn')).attr('id','');// 将克隆成功的按钮在原来按钮的前面,同时干掉克隆dom中的id，避免有相同id
$(cloneBtn).on('click', function(){
var str = "<p class='agree-commit'>同意按钮</p>";
$('body').append(str);
$('.agree-commit').on('click',function(){
console.log(1)
$('#btn').trigger('click');// 直接触发原来按钮中的事件，不用处理它里面的逻辑
})
})
</script>
</body>
</html>
886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
