jQuery锚标记不会打开弹出窗口

问题描述

我正在尝试做两件事：

今天有人单击“租赁”时，打开一个弹出窗口（请注意，我无法控制HTML，因此Jquery是更改HREF的唯一方法）
第一次单击后，将Anchor标记更改回“ /floor-plans.aspx”

某种程度上，代码根本没有调用函数并且不确定如何执行＃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>

解决方法

这有两个部分，第一部分是单击以发出警报，第二部分是不发出警报，但允许单击（并关闭此处理程序，只有我们才发出警报）

此外，我添加了一个类来使选择器更易于使用/理解。

您没有问如何知道在函数中单击了什么，因此我向您展示了如何传递一些额外的值/对象。

<!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>

您的第一个问题是选择锚点，而第二个问题与您如何使用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元素尚未准备好，则可以委派click事件：

$(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>

html javascript

jQuery锚标记不会打开弹出窗口

问题描述

解决方法

相关问答