programing

jquery를 통해 앵커 클릭을 시뮬레이션하려면 어떻게 해야 합니까?

sourcejob 2023. 9. 6. 22:03
반응형

jquery를 통해 앵커 클릭을 시뮬레이션하려면 어떻게 해야 합니까?

jQuery를 통해 앵커 클릭을 조작하는 데 문제가 있습니다.입력 단추를 처음 클릭할 때 두 번째 또는 세 번째는 아니지만 두꺼운 상자가 나타나는 이유는 무엇입니까?

여기 내 코드가 있습니다.

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

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

링크를 직접 클릭하면 항상 작동하지만 입력 버튼을 통해 두꺼운 상자를 활성화하려고 하면 작동하지 않습니다.FF에 있습니다.Chrome의 경우 매번 작동하는 것 같습니다.힌트 있어요?

제게 도움이 된 것은 다음과 같습니다.

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

그런 식으로 jQuery 전화를 거는 것을 피하도록 하세요.지에를트할다oe를t에 바인딩합니다.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.location자바스크립트로:

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

편집 2:

이제 Thickbox가 사용자 지정 jQuery UI 위젯이라는 것을 알게 되었고, 여기서 지침을 찾았습니다.

지침:

  • 요소 ( ()<a href>)

  • box 합니다 (에 thick box 을 을 합니다 합니다 을 을 (class="thickbox")

  • href은 다음합니다:의은음를다를다음:ee은의fdr .#TB_inline

  • href에라을합니다 뒤에 합니다.#TB_inline다음 쿼리 문자열을 앵커에 추가합니다.

    ?높이=300&너비=300&너비Id=myOnPage 콘텐츠

  • 따라서 쿼리의 높이, 너비 및 inlineId 값을 변경합니다(인라인).ID는 ThickBox에 표시할 내용을 포함하는 요소의 ID 값입니다.

  • modal할 수 modaltrue).#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true ThickBox(두꺼운 상자)를 호출해야 tb_remove()ThickBox 내에서 작동합니다.ThickBox를 닫으려면 yes(예) 또는 no(아니오)를 클릭해야 하는 숨겨진 모드 내용 예제를 참조하십시오.

저는 최근에 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팀에서 개발한 simul이라는 jquery plugin입니다.당신은 jquery후에 그것을 포함할 수 있고 그리고나서 당신은 다음과 같은 것을 할 수 있습니다.

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

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

질문 제목에는 "jQuery에서 앵커 클릭을 시뮬레이션하려면 어떻게 해야 합니까?"라고 나와 있습니다.다음과 같은 "트리거" 또는 "트리거 핸들러" 방법을 사용할 수 있습니다.

<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전에도 그랬었고, 그들은 하루아침에 일했습니다.


triggerHandlerOP가 원하는 대로 하지 않습니다.저는 1421968이 이 질문에 가장 좋은 답을 준다고 생각합니다.

Selenium API를 통해 브라우저 호환 방식으로 요소에 대한 클릭을 트리거하는 방법을 확인하는 것이 좋습니다.

를 .BrowserBot.prototype.triggerMouseEvent기능.

다음을 사용할 수 있습니다.

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

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

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

앵커 클릭을 조작해야 합니까?두꺼운 상자 사이트에서:

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

이 방법이 허용되는 경우 입력 자체에 두꺼운 상자 클래스를 넣는 것만큼 쉽습니다.

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

그렇지 않다면 Firebug를 사용하고 앵커 요소의 on-click 메서드에 중단점을 두어 첫 번째 클릭 시에만 트리거되는지 확인하는 것이 좋습니다.

편집:

좋아요, 제가 직접 시도해 봐야 했고요. 당신의 코드는 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의 다른 버전을 사용하고 있다는 것입니다.저는 두꺼운 상자 페이지에서 받은 jquery 1.3.2와 두꺼운 상자 3.1을 사용하고 있습니다.

jQuery를 통해 양식을 만들거나 HTML 페이지 코드에 링크 href와 유사한 작업을 수행할 수 있습니다.

<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를 사용하여 스크롤 탑 속성을 에니메이션했습니다.$(document).ready.복잡한 트리거가 필요 없으며 IE 6 및 다른 모든 브라우저에서 작동합니다.

당신이 JQuery를 사용할 필요가 없다면, 나는 그렇지 않습니다.s의 크로스 브라우저 ..click()을 사용합니다 그래서 다음을 사용합니다.

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

자바스크립트에서는 이렇게 할 수 있습니다.

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");

쥬레의 스크립트를 이용해 원하는 만큼 쉽게 요소를 "클릭"할 수 있도록 만들었습니다.
방금 1600+ 아이템에서 구글 리더를 사용했는데 (파이어폭스에서) 완벽하게 작동했습니다!

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);

안드로이드 네이티브 브라우저에서는 "숨겨진 입력(파일) 요소"를 클릭할 수 없습니다.

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

하지만 이는 효과가 있습니다.

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

jQuery UI 스피너로 유닛 테스트에서 '클릭' 시뮬레이션을 시도하는 과정에서 작업에 대한 이전 답변을 얻을 수 없었습니다.특히 아래쪽 화살표를 선택하는 '스핀'을 시뮬레이션 해보려 했습니다.jQuery UI spinner unit test를 살펴보았는데 다음과 같은 방법을 사용하여 효과가 있었습니다.

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

언급URL : https://stackoverflow.com/questions/773639/how-can-i-simulate-an-anchor-click-via-jquery

반응형