bind 또는 click으로 이벤트 핸들러를 링크에 바인딩하지 않은 경우 jQuery의 click()을 호출하여 링크를 팔로우할 수 있습니까?
시간이 지나면 다른 페이지로 이동하려면 링크를 클릭하는 것을 에뮬레이트해야 하는 타이머가 JavaScript에 있습니다.를 위해 의 "jQuery"를 합니다.click()기능.사용한 적이 있습니다.$().trigger()그리고.window.location또한, 세 가지 모두에서 의도한 대로 작동할 수 있습니다.
제가 이상한 행동을 목격했습니다click()무슨 일이 일어나고 왜 일어나는지 이해하려고 노력하고 있습니다.
이 질문에서 설명하는 모든 작업에 Firefox를 사용하고 있지만 다른 브라우저에서 이 작업을 수행할 수 있을지도 궁금합니다.
제가 하지않경우은사를 .$('a').bind('click',fn)또는$('a').click(fn)핸들러를 " " 이트핸를러설면다호음출다합니을려정"를 호출합니다.$('a').click()아무것도 하지 않는 것처럼 보입니다.브라우저는 새 페이지를 로드하지 않으므로 이 이벤트에 대한 브라우저의 기본 처리기를 호출하지 않습니다.
그러나 이벤트 핸들러를 먼저 설정하면 이벤트 핸들러가 아무것도 하지 않더라도 예상대로 작동합니다.
$('a').click(function(){return true;}).click();
그러면 내가 직접 a를 클릭한 것처럼 새 페이지가 로드됩니다.
그래서 제 질문은 두 가지입니다.어딘가에서을 하는 요? 왜 전화를 걸까요? 그리고 왜 전화를 하는 것입니까?click()내가 내 핸들러를 만들지 않았다면 기본 동작으로 아무것도 하지 않습니까?
호프만이 내 결과를 복제하려고 했을 때 결정했듯이, 위에서 설명한 결과는 실제로 일어나지 않습니다.어제 제가 관찰한 사건의 원인이 무엇인지는 확실하지 않지만, 오늘은 제가 질문에서 설명한 것과 다르다는 것을 확신합니다.
따라서 브라우저에서 클릭을 "가짜"할 수 없으며 jQuery가 수행하는 작업은 이벤트 핸들러를 호출하는 것뿐입니다.여전히 사용할 수 있습니다.window.location페이지를 바꾸는 것, 그리고 그것은 나에게 잘 맞습니다.
다른 옵션은 물론 바닐라 자바스크립트를 사용하는 것입니다.
document.getElementById("a_link").click()
흥미롭게도, 이것은 아마도 jQuery의 "기능 요청"(즉 버그)일 것입니다. jQuery 이벤트를 요소에 바인딩하는 경우 jQuery click 이벤트는 요소에 대한 클릭 동작(DOM에서 onClick 이벤트 호출)만 트리거합니다. 당신은 jQuery 메일링 리스트(http://forum.jquery.com/ )로 가서 이를 보고해야 합니다.이것이 수배된 행동일 수도 있지만, 저는 그렇게 생각하지 않습니다.
편집:
제가 몇 가지 테스트를 했는데 당신이 말한 것은 틀렸습니다. 함수를 'a' 태그에 바인딩해도 href 속성으로 지정된 웹 사이트로 이동하지 않습니다.다음 코드를 사용해 보십시오.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
/* Try to dis-comment this:
$('#a').click(function () {
alert('jQuery.click()');
return true;
});
*/
});
function button_onClick() {
$('#a').click();
}
function a_onClick() {
alert('a_onClick');
}
</script>
</head>
<body>
<input type="button" onclick="button_onClick()">
<br>
<a id='a' href='http://www.google.com' onClick="a_onClick()"> aaa </a>
</body>
</html>
링크를 직접 클릭하지 않는 한(댓글 코드가 있든 없든) google.com 로 이동하지 않습니다.또한 클릭 이벤트를 링크에 바인딩하더라도 버튼을 클릭하면 보라색이 되지 않습니다.링크를 직접 클릭할 경우에만 보라색이 됩니다.
제가 몇 가지 조사를 해봤는데 브라우저가 자바스크립트로 "가짜 클릭"을 지원하지 않기 때문에 .click은 'a' 태그와 함께 작동하지 않는 것 같습니다.제 말은, 자바스크립트로 요소를 "클릭"할 수 없다는 것입니다.'a' 태그를 사용하면 onClick 이벤트를 트리거할 수 있지만 링크 색상은 변경되지 않습니다(방문한 링크 색상으로 기본값은 대부분의 브라우저에서 보라색입니다).따라서 href 속성으로 이동하는 작업이 onClick 이벤트의 일부가 아니라 브라우저에서 하드 코딩되기 때문에 $().click 이벤트가 'a' 태그로 작동하도록 하는 것은 말이 되지 않습니다.
만약 당신이 코드를 본다면.$.click 아마 그 click이벤트가 진행되기 전에.그냥 그것을 얻는 게 어때요?href링크에서 속성을 지정하고 페이지 위치를 수동으로 변경하시겠습니까?
window.location.href = $('a').attr('href');
이것이 클릭이 되지 않는 이유입니다.trigger 1: 버전 1.3.2의 jQuery:
// Handle triggering native .onfoo handlers (and on links since we don't call .click() for links)
if ( (!elem[type] || (jQuery.nodeName(elem, 'a') && type == "click")) && elem["on"+type] && elem["on"+type].apply( elem, data ) === false )
event.result = false;
// Trigger the native events (except for clicks on links)
if ( !bubbling && elem[type] && !event.isDefaultPrevented() && !(jQuery.nodeName(elem, 'a') && type == "click") ) {
this.triggered = true;
try {
elem[ type ]();
// Prevent Internet Explorer from throwing an error for some hidden elements
}
catch (e)
{
}
}
처리기가 있는 경우 처리기를 호출한 후 jQuery는 개체에 대해 이벤트를 트리거합니다.그러나 요소가 링크가 아닌 경우 클릭 이벤트에 대한 기본 처리기만 호출합니다.저는 이것이 어떤 이유에서인지 의도적으로 이루어졌다고 생각합니다.여부에 관계없이 이벤트 이트핸가정는지여관부이계이귀없에경하의는우다모니습겠잘르이유를유한발벤를것핸이네브연티들이이트벤러는를하결들러실므하로사야이의어었되▁in▁the▁this▁case▁handler▁native▁attaching▁an▁your다▁handler▁whether▁should'니▁sure▁so▁true▁caused▁event▁be▁though▁is▁not습▁i▁an모▁defined▁orm▁why▁not겠르잘이▁event,이벤를유유한발트를것브네핸티onClick호출할 핸들러입니다.당신은 제가 한 일을 하고 사형 집행 과정을 밟아야만 그것이 어디로 불리는지 알 수 있을 것입니다.
JavaScript/jQuery는 프로그래밍 방식으로 "클릭"된 링크의 기본 동작을 지원하지 않습니다.
대신 양식을 작성하여 제출할 수 있습니다.이게하렇면사없다습니필요가할용다없니▁this습▁havet▁don▁use'▁way▁you를 사용할 필요가 없습니다.window.location또는window.open브라우저에 의해 원하지 않는 팝업으로 차단되는 경우가 많습니다.
이 스크립트에는 두 가지 방법이 있습니다. 하나는 세 개의 새 탭/창을 열려고 하는 방법(Internet Explorer 및 Chrome에서 하나만 열려 있으며 자세한 내용은 아래에 나와 있음)과 다른 하나는 링크 클릭 시 사용자 지정 이벤트를 실행하는 방법입니다.
방법은 다음과 같습니다.
HTML
<html>
<head>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<button id="testbtn">Test</button><br><br>
<a href="https://google.nl">Google</a><br>
<a href="http://en.wikipedia.org/wiki/Main_Page">Wikipedia</a><br>
<a href="https://stackoverflow.com/">Stack Overflow</a>
</body>
</html>
jQuery(파일 스크립트.js)
$(function()
{
// Try to open all three links by pressing the button
// - Firefox opens all three links
// - Chrome only opens one of them without a popup warning
// - Internet Explorer only opens one of them WITH a popup warning
$("#testbtn").on("click", function()
{
$("a").each(function()
{
var form = $("<form></form>");
form.attr(
{
id : "formform",
action : $(this).attr("href"),
method : "GET",
// Open in new window/tab
target : "_blank"
});
$("body").append(form);
$("#formform").submit();
$("#formform").remove();
});
});
// Or click the link and fire a custom event
// (open your own window without following
// the link itself)
$("a").on("click", function()
{
var form = $("<form></form>");
form.attr(
{
id : "formform",
// The location given in the link itself
action : $(this).attr("href"),
method : "GET",
// Open in new window/tab
target : "_blank"
});
$("body").append(form);
$("#formform").submit();
$("#formform").remove();
// Prevent the link from opening normally
return false;
});
});
각 링크 요소에 대해 다음과 같습니다.
- 양식을 작성합니다.
- 특성을 부여합니다.
- 제출할 수 있도록 DOM에 추가합니다.
- 제출
- DOM에서 폼을 제거하여 모든 트레이스를 제거합니다. *악의 웃음 삽입*
이제 새 탭/창 로드가 완료되었습니다."https://google.nl"(또는 원하는 모든 URL을 바꾸십시오.)불행히도 당신이 이런 방식으로 두 개 이상의 창을 열려고 할 때, 당신은 다음과 같은 메시지를 받습니다.Popup blocked메시지 표시줄은 두 번째 메시지를 열려고 할 때 표시됩니다(첫 번째 메시지는 여전히 열려 있습니다).
이 방법을 사용한 방법에 대한 자세한 내용은 다음을 참조하십시오.
앵커 태그의 클릭 핸들러는 jQuery에서 특별한 경우입니다.
앵커의 onclick 이벤트(브라우저에서 알고 있음)와 DOM의 앵커 태그 개념을 감싸는 jQuery 객체의 click 이벤트를 혼동하고 있는 것 같습니다.
여기에서 jQuery 1.3.2 소스를 다운로드할 수 있습니다.
소스의 관련 섹션은 2643-2645행입니다(이를 더 쉽게 이해할 수 있도록 여러 줄로 나누었습니다).
// Handle triggering native .onfoo handlers (and on links since we don't call .click() for links)
if (
(!elem[type] || (jQuery.nodeName(elem, 'a') && type == "click")) &&
elem["on"+type] &&
elem["on"+type].apply( elem, data ) === false
)
event.result = false;
요소에 할 수 .jQuery를 사용하여 해당 요소에 대한 jQuery 개체를 선택할 수 있습니다. 다음, DOM 요소를 DOM 요소라고 .click()방법.
ID 기준:
$("#my-link").each(function (index) { $(this).get(0).click() });
또는 jQuery를 사용하여 CSS 클래스별 링크 묶음을 클릭합니다.
$(".my-link-class").each(function (index) { $(this).get(0).click() });
jQuery를 연결할 요소 내부에 있는 하이퍼링크 <a> 요소를 트리거합니다.()를 클릭하여 다음을 수행합니다.
<div class="TopicControl">
<div class="articleImage">
<a href=""><img src="" alt=""></a>
</div>
</div>
스크립트에서 클릭 이벤트를 적용할 주 컨테이너에 연결합니다.그런 다음 표준 jQuery 방법론을 사용하여 요소(유형, 클래스 및 ID)를 찾고 클릭을 실행합니다.jQuery는 클릭을 시작하기 위해 재귀 함수를 입력하고 이벤트 'e' 및 stopPropagation() 함수를 사용하여 재귀 함수를 해제하고 false를 반환합니다. jQuery가 링크를 시작하는 것 외에는 다른 작업을 수행하지 않기를 원하기 때문입니다.
$('.TopicControl').click(function (event) {
$(this).find('a').click();
event.stopPropagation();
return false;
});
다른 해결책은 컨테이너를 <a> 요소로 포장하고 <div> 대신 에 컨테이너를 내부에 배치하는 것입니다.W3C 표준을 준수하도록 디스플레이 블록의 스팬을 설정합니다.
이벤트에 바인딩된 이벤트가 없기 때문에 아무것도 수행되지 않습니다.내 기억이 맞다면, jQuery는 성능 및 기타 목적을 위해 NodeLists에 바인딩된 자체 이벤트 핸들러 목록을 유지 관리합니다.
이 기능이 하나의 사례 또는 매우 적은 사례에 대해 필요한 경우(전체 응용프로그램에 이 기능이 필요하지 않음).저는 차라리 jQuery를 그대로 두고(새로운 버전, CDN 등으로 업데이트할 수 있는 여러 가지 이유로) 다음과 같은 해결책을 가지고 싶습니다.
// For modern browsers
$(ele).trigger("click");
// Relying on Paul Irish's conditional class names,
// <https://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/>
// (via HTML5 Boilerplate, <https://html5boilerplate.com/>) where
// each Internet Explorer version gets a class of its version
$("html.ie7").length && (function(){
var eleOnClickattr = $(ele).attr("onclick")
eval(eleOnClickattr);
})()
동일한 탭에서 하이퍼링크를 열려면 다음을 사용합니다.
$(document).on('click', "a.classname", function() {
var form = $("<form></form>");
form.attr(
{
id : "formid",
action : $(this).attr("href"),
method : "GET",
});
$("body").append(form);
$("#formid").submit();
$("#formid").remove();
return false;
});
언급URL : https://stackoverflow.com/questions/1694595/can-i-call-jquerys-click-to-follow-an-a-link-if-i-havent-bound-an-event-ha
'source' 카테고리의 다른 글
| 버전 제어 독립 레코드 및 구성을 기반으로 모든 레코드 나열 (0) | 2023.07.31 |
|---|---|
| Oracle ID 열 및 선택 항목에 삽입 (0) | 2023.07.31 |
| 부트스트랩 3의 열에서 패딩 제거 (0) | 2023.07.31 |
| node.js가 설치되었는지 여부를 확인하는 방법 (0) | 2023.07.31 |
| 슈퍼 사용법 정확함(잘못된 패싱) (0) | 2023.07.31 |