jQuery 클릭이벤트 강제 실행(programmatically click)

사용자가 직접 클릭하지 않고 자동으로 클릭이 되는 기능을 동작시키고 싶을 때가 있다.

왼쪽 메뉴를 클릭하거나 로그인 버튼을 눌렀을 때 팝업 모달이 자동으로 실행되게 하고 싶은데 처음에는 좀 해맸다.

로직에 대한 기본 이해 부족이었다.

동작 순서를 고려하여 순차적으로 실행되게 해야 한다.

1. 왼쪽 메뉴를 누르면

2. a href 링크의 고유 기능은 이벤트 실행 금지 시킨다. e.preventDefault();

3. 우측 content 에 원하는 걸 load 시킨다.

    $('.memberModify').on('click',function(e){
        var uri = $(this).attr('href');
        if(uri != '#'){
            $('#panel_content').load(uri);
        }
    });

4. load 되는 곳에 특정 키워드가 포함되어 있고 또 클릭을 해야 하는 불편이 있다면...

    $('.memberModify').on('click',function(e){
        e.preventDefault(); // a 링크 실행 방지
        var uri = $(this).attr('href');
        if(uri != '#'){
            $('#panel_content').load(uri,function(){
                if($('#modalLoginClick:contains("눌러주세요")')){
                    $('#modalLoginClick').trigger('click'); // 자동 클릭
                }
            });
        }
    });

trigger 메소드를 사용하면 자동 클릭이 되는 걸 확인할 수 있다.

load 시킨 다음에 자동 클릭이 되어야 정확하게 원하는 결과가 나왔다.

ㅇ trigger(eventType)
  eventType는 이벤트의 타입을 지정하는 문자열로써 click, dblclick, focus, blur 등등 해당 이벤트를 구동한다.