活用clone和trigger函数，点击按钮原有事件不触发，之后再触发原有事件

缺乏、安全感 2022-05-15 01:55 140阅读 0赞

活用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>