js实现触发其他元素事件

写此文章作为记录。

前提：自己是想实现，在点击A元素的时候，触发B元素的点击或者其他事件。（代码中有使用到iconfont，可自行选择）

使用的api：trigger

html：

<div id="dv"></div>
    <div id="dv1"></div>

js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script>
    function createButton() {

        var divLeft = $('<div id="dv11"><i class="iconfont"></i></div>');

        var divRight = $('<div id="dv22"><i class="iconfont"></i></div>');

        divLeft.css({
            'width':'40px',
            'height':'40px',
            'backgroundColor':'rgba(0,0,0,0.2)',
            'position':'absolute',
            'top':'300px',
            'left':'100px',
            'cursor':'pointer'
        });

        divRight.css({
            'width':'40px',
            'height':'40px',
            'backgroundColor':'rgba(0,0,0,0.2)',
            'position':'absolute',
            'top':'300px',
            'right':'100px',
            'cursor':'pointer'
        })

        $('#dv').append(divLeft);
        $('#dv').append(divRight);

        $('#dv1').click(function(){
            alert('dv1')
        })

        $('#dv11').click(function(){
            $('#dv1').trigger('click');
        })

        $('#dv22').click(function(){
            $('#dv1').trigger('click');
        })


    }

    createButton()
</script>