jQuery를 통해 앵커 클릭을 어떻게 시뮬레이션 할 수 있습니까?
문제
jQuery를 통해 앵커 클릭을 위조하는 데 문제가 있습니다. 입력 버튼을 처음 클릭하면 두꺼운 상자가 나타나지만 두 번째 또는 세 번째는 그렇지 않습니까?
내 코드는 다음과 같습니다.
<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.location
JavaScript :
<script type="text/javascript">
$(function(){
$('#thickboxButton').click(function(){
window.location = $('#thickboxId').attr('href');
});
});
</script>
편집 2 :
이제 Thickbox가 사용자 정의 jQuery UI 위젯이라는 것을 알았으므로 지침을 찾았습니다. 여기:
지침:
- 링크 요소 만들기 (
<a href>
) - 링크에 Deickbox의 값으로 클래스 속성을 제공합니다 (
class="thickbox"
) - 에서
href
링크의 속성 다음 앵커를 추가합니다.#TB_inline
에서
href
이후의 속성#TB_inline
다음 쿼리 문자열을 앵커에 추가하십시오.? 높이 = 300 & 너비 = 300 & inlineid = myonpagecontent
그에 따라 쿼리에서 높이, 너비 및 inlineID의 값을 변경합니다 (inlineID는 두꺼운 상자에 표시하려는 컨텐츠를 포함하는 요소의 ID 값입니다.
- 선택적으로 쿼리 문자열에 modal = true를 추가 할 수 있습니다 (예 :
#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true
) 두꺼운 상자를 닫으려면tb_remove()
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>
이 접근법은 Firefox, Chrome 및 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) {}
이것은 아주 오래된 질문이지만이 작업을 처리하기가 더 쉬운 것을 발견했습니다. Simulate라는 JQuery UI 팀이 개발 한 jQuery 플러그인입니다. jQuery 다음에 포함시킬 수 있고 다음과 같은 일을 할 수 있습니다.
<a href="http://stackoverflow.com/"></a>
$('a').simulate('click');
Chrome, Firefox, Opera 및 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
et al. 그리고 그들은 A'ight를 일했습니다.
업데이트
triggerHandler
실제로 OP가 원하는 것을하지 않습니다. 제 생각에는 1421968 이 질문에 대한 최상의 답변을 제공합니다.
셀레늄 API를보고 브라우저 호환 방식으로 요소를 클릭하는 방법을 확인하는 것이 좋습니다.
찾으십시오 BrowserBot.prototype.triggerMouseEvent
기능.
나는 당신이 사용할 수 있다고 생각합니다.
$('#yourLink').bind('click', function() {
//Do something over here
});
$('#yourLink').trigger('click');
이것은 실제로 클릭을 클릭하지 않고 쉽게 클릭 함수를 트리거합니다.
앵커 클릭을 가짜로 만들어야합니까? Thickbox 사이트에서 :
Teokbox는 링크 요소, 입력 요소 (일반적으로 버튼) 및 영역 요소 (이미지 맵)에서 호출 할 수 있습니다.
그것이 허용되면 Deichbox 클래스를 입력 자체에 두는 것만 큼 쉬워야합니다.
<input id="thickboxButton" type="button" class="thickbox" value="Click me">
그렇지 않은 경우, FireBug를 사용하고 앵커 요소의 OnClick 메소드에 중단 점을 놓고 첫 번째 클릭에서만 트리거되는지 확인하는 것이 좋습니다.
편집하다:
좋아, 나는 나 자신을 위해 그것을 시도해야했고, 당신의 코드는 크롬과 파이어 폭스에서 거의 정확히 일했다.
<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에서 얻은 것을 사용하고 있습니다.
링크 href를 모방하는 동작으로 jQuery 또는 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를 사용하여 스크롤 탑 속성을 애니메이션했습니다. $(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();