jQuery 바인딩 이벤트 on() 및 팝업 window_jquery에 대한 간략한 개요

페이지에 팝업창이 나타나는 경우가 많습니다. 일부 팝업창은 동적으로 생성되고, 일부 팝업창은 페이지 하단에 숨겨지기도 합니다. 팝업 창 이벤트를 모니터링하려면 jQuery 이벤트 바인딩 on() 메서드를 사용할 수 있습니다.

그림과 같이 팝업창은 js에 의해 동적으로 생성됩니다. 팝업창에서 "지금 사용" 링크를 클릭하면 팝업이 닫히는 효과가 있습니다. 창을 띄우고 앵커 포인트로 점프합니다.

태그는 다음과 같습니다.

<astyle="display:" title="立即去使用" target="_blank" gid="167" href="http://act.vip.xunlei.com/vip/2016/51dps/#gamelist" class="co_vip tdu ">立即去使用</a>

팝업창에서 클릭 이벤트를 모니터링해야 하는데, 팝업창 자체가 동적으로 생성되기 때문에 팝업이 뜨면 본문을 모니터링하고 on() 이벤트를 통해 바인딩해야 합니다. 창이 동적으로 생성되면 클릭 방식을 모니터링할 수 있습니다.

function jump_to_anchor() {
$("body").on("click", "span[name='msgbox_info'] a, .act-pop-table a", function (e) {
link = $(this).attr('href');
if (link == 'http://act.vip.xunlei.com/vip/2016/51dps/#gamelist') {
e.preventDefault();
msgExit();
window.location.href = link;
}
});
}

실제로는 두 개의 a 태그를 사용한 이벤트 바인딩입니다. 링크가 특정 URL인 경우 기본 동작이 차단되고 앵커 포인트인 링크로 이동하기 위해 팝업 창 닫기 메서드가 호출됩니다. .

다음은 동적 요소의 클릭 이벤트를 바인딩하는 jQuery on() 메서드를 소개합니다

이전에 이 문제로 고민한 적이 있습니다. jQuery 1.7 버전 이후에 on 메서드가 추가되었는데, 그 전에는 live(), 바인딩(), 대리자() 및 기타 메서드보다 우수성이 높다는 것을 알았습니다. 프로젝트에서는 이를 사용해 결과를 테스트해보고 싶었는데, 동적으로 생성된 태그가 클릭 시 반응하지 않는 것을 발견하고, 여기저기서 정보를 검색해 본 결과 네티즌들에게 물어봤습니다. 시간이 흘러 마침내 기사에서 답을 찾았습니다. . .

jQuery가 동적으로 생성된 요소를 바인딩하기 위해 on을 사용하는 경우 개체로 직접 작업할 수 없습니다. 대신 동적으로 생성되지 않은 상위 ​​노드를 선택한 다음 효과를 얻으려면 개체를 찾아야 합니다. 소스코드만 봐도 누구나 알 수 있을 것이다. 클릭 시 메소드에 생성된 버튼 기본 항목이 유효하지 않으며 라이브 메소드가 유효합니다.

예를 들어 페이지 아래에는 두 가지 요소가 있습니다.

<input type="button" name="addbtn" value="按钮添加" />
<div id="test"></div>

아래 jQuery 코드를 사용하면 차이점을 비교하고 확인할 수 있습니다.

$(function () {
var a = 1,
$_div = $('#test');
$('input[name=addbtn]').on('click', function () {
$_div.append('<input type="button" name="test' + a + '" value="按钮' + a + '"/>');
a++;
});
//偶数项点击事件
$_div.on('click', 'input[name^=test]:even', function () { 
alert('我是有效的on方法,你能看见我吗：' + this.value);
});
//奇数项绑定的点击事件 发现点击无效，而是用live方法却能够支持
$('input[name^=test]:odd').on('click', function () { 
alert('我是无效的on方法,你不能看见我');
});
//奇数项绑定的点击事件 发现点击无效，而是用live方法却能够支持
$('input[name^=test]:odd').live('click', function () {
alert('我是live方法,你能看见我吗：' + this.value);
});
});

코드가 간단해서 데모 페이지는 포함하지 않겠습니다. 이해가 안 되는 부분이 있으면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해드리겠습니다!