jQuery中$.click()無效問題分析
今天做表格前臺(tái)導(dǎo)出到xls時(shí)，想自動(dòng)觸發(fā)a的點(diǎn)擊。但失敗。最后找到這個(gè)文件。
我嘗試過多次用jQuery模擬用戶點(diǎn)擊a標(biāo)簽的功能，但都沒有成功，并且困擾了很久。前段時(shí)間的一次發(fā)呆，冒出了新的想法，于是就動(dòng)手進(jìn)行了測(cè)試。
先看下邊的代碼：
<html>
<head>磨途歌-A標(biāo)簽測(cè)試1<head>
<body>
<a href=" </body>
</html>
<script src=">
<script>
jQuery(function($) {
//給所有A標(biāo)簽綁定點(diǎn)擊觸發(fā)事件
$('a').click(function() {
alert(1);
});
//觸發(fā)所有A標(biāo)簽的點(diǎn)擊事件
$('a').click();
});
</script>
上邊的代碼確實(shí)已經(jīng)觸發(fā)了點(diǎn)擊A標(biāo)簽事件，但大家一定也會(huì)有疑問，為什么點(diǎn)擊了A標(biāo)簽，卻不觸發(fā)A標(biāo)簽的跳轉(zhuǎn)事件？
一開始還以為是瀏覽器做了相應(yīng)的安全措施，屏蔽了JS對(duì)A標(biāo)簽的操作，后來發(fā)現(xiàn)，并不是這樣的，接下來就說說其中的原委。
在開始解釋前，我先拋出一個(gè)問題。在我們點(diǎn)擊“A標(biāo)簽”的時(shí)候，究竟是點(diǎn)擊了什么才發(fā)生的跳轉(zhuǎn)？
1）點(diǎn)擊的是“A標(biāo)簽”本身？
2）點(diǎn)擊的是“A標(biāo)簽”中顯示的文字？
說到這里，大家應(yīng)該明白了，我們上邊的代碼已經(jīng)證實(shí)了點(diǎn)擊A標(biāo)簽本身，并不會(huì)觸發(fā)跳轉(zhuǎn)到指定鏈接的事件，就是說，我們平時(shí)都是點(diǎn)擊的A標(biāo)簽中的文字了？
既然有了頭緒，那么就來動(dòng)手試試。
<html>
<head>磨途歌-A標(biāo)簽測(cè)試2<head>
<body>
<a href=" </body>
</html>
<script src=">
<script>
jQuery(function($) {
var mo2g = '<span id="mo2g">磨延城<span>';
//給A標(biāo)簽中的文字添加一個(gè)能被jQuery捕獲的元素
$('a').append(mo2g);
//模擬點(diǎn)擊A標(biāo)簽中的文字
$('#mo2g').click();
});
</script>
這下效果出來了，事實(shí)證明了上述的推斷是正確的，所以要想用JS模擬點(diǎn)擊A標(biāo)簽事件，就得先往A標(biāo)簽中的文字添加能被JS捕獲的元素，然后再用JS模擬點(diǎn)擊該元素即可。
以上就是本文講訴的相關(guān)jQuery中$("a").click()無效問題的分析了，希望小伙伴們能夠喜歡。
- jquery單選框radio綁定click事件實(shí)現(xiàn)方法
- jquery bind(click)傳參讓列表中每行綁定一個(gè)事件
- 使用jQuery的attr方法來修改onclick值
- jquery 為a標(biāo)簽綁定click事件示例代碼
- jquery trigger偽造a標(biāo)簽的click事件取代window.open方法
- JQuery給元素綁定click事件多次執(zhí)行的解決方法
- jQuery防止click雙擊多次提交及傳遞動(dòng)態(tài)函數(shù)或多參數(shù)
- jQuery focus和blur事件的應(yīng)用詳解
- jquery focus(fn),blur(fn)方法實(shí)例代碼
- jQuery解決input元素的blur事件和其他非表單元素的click事件沖突問題
相關(guān)文章
說到模擬SELECT框，想必大家第一想到的就是使用javascript吧，其實(shí)是jquery也是可以做到的，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-10-10
jQuery下通過replace字符串替換實(shí)現(xiàn)大小圖片切換
實(shí)現(xiàn)的效果有點(diǎn)類似于Google picasa相冊(cè)不同尺寸圖片的切換效果。本實(shí)例通過文字大?。╢ont-size）控制圖片尺寸的做法是跟Google學(xué)習(xí)的，但是jQuery代碼是根據(jù)效果自己想出來的，邏輯很簡(jiǎn)單，沒有什么精妙之處2012-05-05
jquery實(shí)現(xiàn)簡(jiǎn)單的彈窗效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
jQuery動(dòng)態(tài)添加元素?zé)o法觸發(fā)綁定事件的解決方法分析
這篇文章主要介紹了jQuery動(dòng)態(tài)添加元素?zé)o法觸發(fā)綁定事件的解決方法,結(jié)合實(shí)例形式分析了動(dòng)態(tài)添加元素?zé)o法綁定事件的原因與相關(guān)解決方法,需要的朋友可以參考下2018-01-01
基于jquery實(shí)現(xiàn)表格內(nèi)容篩選功能實(shí)例解析
對(duì)于表格來說，當(dāng)數(shù)據(jù)比較多的時(shí)候，我們無法一頁一頁的查找，這樣我們就可以進(jìn)行篩選操作，這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)表格內(nèi)容篩選功能的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
jquery ajax局部加載方法詳解(實(shí)現(xiàn)代碼)
下面想就為大家?guī)硪黄猨query ajax局部加載方法詳解(實(shí)現(xiàn)代碼)。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧2016-05-05
本文主要對(duì)jquery中用函數(shù)來設(shè)置css樣式的方法進(jìn)行詳細(xì)介紹，具有很好的參考價(jià)值，下面就跟小編一起來看下吧2016-12-12
jQuery 中的each函數(shù) 很方便,$.each ()函數(shù)封裝了十分強(qiáng)大的遍歷功能，它可以遍歷一維數(shù)組、多維數(shù)組、DOM , JSON 等等，在javaScript 開發(fā)過程中使用$each可以大大的減輕我們的工作量,這里貼一個(gè)簡(jiǎn)單的模仿each的函數(shù),只能處理數(shù)組類型的對(duì)象。2015-04-04
jQuery模擬select實(shí)現(xiàn)下拉菜單功能
這篇文章主要介紹了jQuery模擬select實(shí)現(xiàn)下拉菜單功能,比較實(shí)用,需要的朋友可以參考下。2016-06-06
jQuery實(shí)現(xiàn)圖片向左向右切換效果的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨Query實(shí)現(xiàn)圖片向左向右切換效果的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05