jquery - Chrome 扩展程序 - 为什么弹出窗口中的点击事件会刷新弹出窗口 html?

标签 jquery css events google-chrome-extension popup

我尝试使用 Chrome 扩展程序,发现弹出窗口有一种奇怪的行为。

在 popup.html 中有一个元素 <a id="grantexpert">...</a>在 popup.js 中,我想在单击时更改此元素的背景颜色。在文档准备好后立即更改颜色时,颜色的更改会起作用。但是在点击事件中,颜色会在点击时改变很短的时间(只是眨眼),然后立即恢复到原始设置。看起来弹出窗口在点击事件后再次重新加载。

list :

  "browser_action": {
    "default_popup": "popup/popup.html"
  },

popup.html:

<!DOCTYPE html>
  <head>
    <script src='../other/jquery-3.1.1.min.js'></script>
    <script src='popup.js'></script>
  </head>

  <body style="width:250px;">

    <a class="testitem" href id="grantexpert">grantexpert.sk</a>

  </body>
</html>

popup.js:

(function($) {

  $(document).ready(function() {

    //$("#grantexpert").css('font-size', '28px'); - this works

    // this does not work
    $('#grantexpert').click(function () {
      $(this).css('font-size', '28px');
    });

  });

})(jQuery);

为什么元素会在闪烁时更改颜色,但在点击事件后不会保留调整后的属性并将其还原?

最佳答案

尝试删除 a 上的空 href:

<a class="testitem" href id="grantexpert">grantexpert.sk</a>

到:

<a class="testitem" id="grantexpert">grantexpert.sk</a>

关于jquery - Chrome 扩展程序 - 为什么弹出窗口中的点击事件会刷新弹出窗口 html?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41246869/

相关文章:

jquery - 使用 jquery 填充 Angular 范围

javascript - 如何将 (CSS/HTML) 包链接在一起。 CSS/HTML -> CSS/HTML -> CSS/HTML

Javascript 文件适用于计算机文件上的 HTML,但不适用于 Github

javascript - jQuery 对其中一个事件执行某些操作

Jquery日期选择器不显示

html - Catch-22 : I don't want my bullet points outside my div, 但我还希望链接文本左对齐

嵌套表格中的 HTML 表格边框问题

html - 问题在复选框中间居中文本

javascript - 动态创建的元素上的事件绑定(bind)?

WPF/XAML : multiple controls using the same events - is there an easier way?