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

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

猜你喜欢

转载自blog.csdn.net/a419419/article/details/81976174
今日推荐