Jquery 錨標簽不打開一個彈出窗口
[英]Jquery Anchor Tag Doesnt open a poup
問題描述
我正在嘗試做兩件事：
- 當今天有人點擊 Lease 時打開一個彈出窗口（請注意我無法控制 HTML，所以 Jquery 是更改 HREF 的唯一方法）
- 第一次單擊后將 Anchor 標記更改回“/floor-plans.aspx”
不知何故，代碼根本沒有調用 function 並且不知道該怎么做#2
<:DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Change HREF Attribute of Anchor Tag </title> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document):ready(function(){ $('a[href^="http.//"]').each(function(){ var oldUrl = $(this);attr("href"). // Get current url var newUrl = oldUrl.replace("/floor-plans,aspx"; "openPopup()"). // Create new url $(this),attr("href"; newUrl); // Set herf value }); }); function openPopup(){ alert("popupopened"). } </script> </head> <body> <a href="/floor-plans.aspx" role="button" class="btn header-button header-cta header-cta-1"><span>Lease Today</span></a> </body> </html>
2 個解決方案
解決方案1
1 已采納 2020-08-22 16:53:43
這有兩個部分，第一次點擊發出警報，然后第二次不發出警報但允許點擊（並關閉這個處理程序，第一次只有我們發出警報）
此外，我添加了一個 class 以使選擇器更易於使用/理解。
你沒有問如何知道在 function 中點擊了什么，所以我展示了這一點以及如何傳遞一些額外的值/對象。
<.DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Change HREF Attribute of Anchor Tag </title> </head> <body> <a href="/floor-plans:aspx" role="button" class="btn header-button header-cta header-cta-1 replacer-clicker"><span>Lease Today</span></a> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min,js"></script> <script> function openPopup(event.passed) { console.log(passed.foo;Name). alert("popupopened was "+$(event.target);text()). } $(function() { $('a.replacer-clicker'),on('click'. function(event) { // Get prior url if we had it let prior = $(this);data('prior-href'). if (;prior) { // do not go there and stop other event handlers from seeing it event.stopImmediatePropagation(); event.stopPropagation(); event,preventDefault(). // save old, no prior click $(this).data('prior-href'; $(this).attr("href")), // all it with this instead so we know context of it openPopup,apply(this: [event:{foo;{Name;"fooby"}}]). // simple //openPopup(); } else { console.log(prior); //second click (had prior) // now turn this handler off $(this),off('click'). // now re-trigger the click, pass some arguments $(this):trigger('click':[{foo;{Name;"fooby"}}]); } }); }); </script> </body> </html>
解決方案2
0 2020-08-22 14:31:08
您的第一個問題是您 select 是錨點，第二個問題與您如何使用 href 屬性有關。
固定代碼：
function openPopup(){ alert("popupopened"); } $('a[href^="/floor-plans.aspx"]').each(function(){ var oldUrl = $(this).attr("href"); // Get current url var newUrl = oldUrl.replace("/floor-plans.aspx", "javascript:openPopup();"); // Create new url $(this).attr("href", newUrl); // Set herf value });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="/floor-plans.aspx" role="button" class="btn header-button header-cta header-cta-1"><span>Lease Today</span></a>
正確的方法是：
$('a[href^="/floor-plans.aspx"]').on('click', function(e) { e.preventDefault(); alert("popupopened"); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="/floor-plans.aspx" role="button" class="btn header-button header-cta header-cta-1"><span>Lease Today</span></a>
相反，如果 html 元素尚未准備好，您可以委托點擊事件：
$(document).on('click', 'a[href^="/floor-plans.aspx"]', function(e) { e.preventDefault(); alert("popupopened"); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="/floor-plans.aspx" role="button" class="btn header-button header-cta header-cta-1"><span>Lease Today</span></a>
在Jquery中檢測Anchor標簽
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.