jquery를 통해 앵커 클릭을 어떻게 시뮬레이트 할 수 있습니까?

jQuery를 통해 앵커 클릭을 가짜로 만드는 데 문제가 있습니다. 입력 버튼을 처음 클릭 할 때 thickbox가 나타나는 이유는 무엇입니까?

내 코드는 다음과 같습니다.

<input onclick="$('#thickboxId').click();" type="button" value="Click me" />

<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

링크를 직접 클릭하면 항상 작동하지만 입력 버튼을 통해 thickbox를 활성화하려고하면 작동하지 않습니다. 이것은 FF입니다. Chrome의 경우 매번 작동하는 것 같습니다. 힌트가 있습니까?

그런 jQuery 호출을 인라인하지 마십시오. 페이지 상단에 스크립트 태그를 넣어 click이벤트 에 바인딩하십시오 .

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        $('#thickboxId').click();
    });
});
</script>

<input id="thickboxButton" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

편집하다:

링크를 실제로 클릭하는 사용자를 시뮬레이트하려는 경우 가능하지 않다고 생각합니다. 해결 방법은 버튼 click이벤트를 업데이트하여 window.locationJavascript 를 변경하는 것 입니다.

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        window.location = $('#thickboxId').attr('href');
    });
});
</script>

편집 2 :

Thickbox가 사용자 정의 jQuery UI 위젯이라는 것을 알았으므로 여기 에서 지침을 찾았습니다 .

명령:

• 링크 요소 만들기 ( <a href>)

• 링크에 thickbox ( class="thickbox") 값을 가진 클래스 속성을 제공하십시오.

• 에서 href링크의 속성을 다음과 앵커를 추가 :#TB_inline

• 에서 href애프터 속성 #TB_inline추가 앵커에에서 다음 쿼리 문자열 :

  ? height = 300 & width = 300 & inlineId = myOnPageContent

• 쿼리에서 높이, 너비 및 inlineId 값을 적절히 변경하십시오 (inlineID는 ThickBox에 표시 할 내용이 포함 된 요소의 ID 값입니다).

• 선택적 #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true으로 ThickBox를 닫을 때 ThickBox tb_remove()내에서 함수를 호출하도록 modal = true를 쿼리 문자열 (예 :)에 추가 할 수 있습니다 . ThickBox를 닫으려면 예 또는 아니오를 클릭해야하는 숨겨진 모달 컨텐츠 예제를 참조하십시오.

나를 위해 일한 것은 다음과 같습니다.

$('a.mylink')[0].click()

최근 jQuery를 통해 마우스 클릭 이벤트를 트리거하는 방법을 찾았습니다.

    <script type="text/javascript">
    var a = $('.path > .to > .element > a')[0];
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );
    a.dispatchEvent(e);
    </script>

이 접근법은 파이어 폭스, 크롬 및 IE에서 작동합니다. 그것이 누군가를 돕기를 바랍니다.

var comp = document.getElementById('yourCompId');
try { //in firefox
    comp.click();
    return;
} catch(ex) {}
try { // in chrome
    if(document.createEvent) {
        var e = document.createEvent('MouseEvents');
        e.initEvent( 'click', true, true );
        comp.dispatchEvent(e);
        return;
    }
} catch(ex) {}
try { // in IE
    if(document.createEventObject) {
         var evObj = document.createEventObject();
         comp.fireEvent("onclick", evObj);
         return;
    }
} catch(ex) {}

이것은 매우 오래된 질문이지만이 작업을 처리하기가 더 쉽다는 것을 알았습니다. 그것은 jquery UI 팀이 시뮬레이션이라는 jquery 플러그인입니다. jquery 뒤에 포함시킬 수 있으며 다음과 같은 작업을 수행 할 수 있습니다

<a href="http://stackoverflow.com/"></a>
$('a').simulate('click');

크롬, 파이어 폭스, 오페라 및 IE10에서 잘 작동합니다. https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js 에서 다운로드 할 수 있습니다

질문 제목은 "jQuery에서 앵커 클릭을 어떻게 시뮬레이트 할 수 있습니까?"입니다. "trigger"또는 "triggerHandler"메소드를 다음과 같이 사용할 수 있습니다.

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/thickbox.js"></script>
<script type="text/javascript">
$(function() {
    $('#btn').click(function() {
        $('#thickboxId').triggerHandler('click');
    })
})
</script>
...
<input id="btn" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

이 실제 스크립트는 테스트하지 않았지만 trigger이전에는 사용하지 않았 으며 실제로 작동했습니다.

UPDATE
triggerHandler 는 실제로 OP가 원하는 것을 수행하지 않습니다. 1421968 이이 질문에 대한 최상의 답변을 제공 한다고 생각 합니다.

브라우저 호환 방식으로 요소를 클릭하는 방법을 보려면 Selenium API를 살펴 보는 것이 좋습니다.

• selenium-browserbot.js

BrowserBot.prototype.triggerMouseEvent기능을 찾으십시오 .

나는 당신이 사용할 수 있다고 생각합니다 :

$('#yourLink').bind('click', function() {
  //Do something over here
});

$('#yourLink').trigger('click');

실제로 클릭하지 않고 클릭 기능을 쉽게 트리거 할 수 있습니다.

앵커 클릭을 가짜로해야합니까? thickbox 사이트에서 :

ThickBox는 링크 요소, 입력 요소 (일반적으로 버튼) 및 영역 요소 (이미지 맵)에서 호출 할 수 있습니다.

이것이 허용되는 경우 thickbox 클래스를 입력 자체에 배치하는 것만 큼 쉽습니다.

<input id="thickboxButton" type="button" class="thickbox" value="Click me">

그렇지 않은 경우 Firebug를 사용하고 앵커 요소의 onclick 메소드에 중단 점을 배치하여 첫 번째 클릭에서만 트리거되는지 확인하는 것이 좋습니다.

편집하다:

좋아, 나는 그것을 직접 시도해야했고 나에게 거의 정확하게 코드가 Chrome과 Firefox에서 모두 작동했다.

<html>
<head>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>
<body>
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="thickbox.js" type="text/javascript"></script>
<input onclick="$('#thickboxId').click();" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>
</body>
</html>

입력 또는 앵커 요소를 클릭해도 창이 팝업됩니다. 위의 코드가 효과가 있다면 오류가 다른 곳에 있고 문제를 격리하려고 시도하는 것이 좋습니다.

또 다른 가능성은 다른 버전의 jquery / thickbox를 사용하고 있다는 것입니다. thickbox 페이지-jquery 1.3.2 및 thickbox 3.1에서 얻은 것을 사용하고 있습니다.

jQuery를 통해 또는 링크 href를 모방하는 동작으로 HTML 페이지 코드에서 양식을 작성할 수 있습니다.

<a id="anchor_link" href="somepath.php">click here</a>.

var link = $('#anchor_link').attr('href');
$('body').append('<form id="new_form" action="'+link+'"></form>');
$('#new_form').submit();

페이지에 방문하는 동안 앵커 클릭을 시뮬레이트하기 위해 jQuery를 사용하여 scrollTop 속성에 $(document).ready.복잡한 트리거가 필요하지 않으며 IE 6 및 다른 모든 브라우저에서 작동합니다.

JQuery를 사용할 필요가 없다면 필요하지 않습니다. 의 크로스 브라우저 기능에 문제가 있습니다 .click(). 그래서 나는 사용합니다 :

eval(document.getElementById('someid').href)

Javascript에서는 다음과 같이 할 수 있습니다

function submitRequest(buttonId) {
    if (document.getElementById(buttonId) == null
            || document.getElementById(buttonId) == undefined) {
        return;
    }
    if (document.getElementById(buttonId).dispatchEvent) {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.getElementById(buttonId).dispatchEvent(e);
    } else {
        document.getElementById(buttonId).click();
    }
}

그리고 당신은 그것을처럼 사용할 수 있습니다

submitRequest("target-element-id");

Jure의 스크립트를 사용하여 원하는만큼 많은 요소를 쉽게 "클릭"할 수있었습니다.
1600 개 이상의 항목에서 Google 리더를 사용했으며 Firefox에서 완벽하게 작동했습니다!

var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
$(selector).each(function(){this.dispatchEvent(e);});

JQuery('#left').triggerHandler('click');Firefox 및 IE7에서 잘 작동합니다. 다른 브라우저에서 테스트하지 않았습니다.

자동 사용자 클릭을 트리거하려면 다음을 수행하십시오.

window.setInterval(function() 
    {
        $('#left').triggerHandler('click');
    }, 1000);

"숨겨진 입력 (파일) 요소"를 클릭하기 위해 Android 기본 브라우저에서 작동하지 않습니다.

$('a#swaswararedirectlink')[0].click();

그러나 이것은 작동합니다.

$("#input-file").show();
$("#input-file")[0].click();
$("#input-file").hide();

jQuery UI 스피너를 사용하여 단위 테스트에서 '클릭'을 시뮬레이션하려고 할 때 이전 답변을 얻을 수 없었습니다. 특히, 아래쪽 화살표를 선택하는 '스핀'을 시뮬레이션하려고했습니다. jQuery UI 스피너 단위 테스트를 살펴본 결과 다음과 같은 방법을 사용했습니다.

element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();