1

Im experimenting with Chrome extensions and I found a weird behavior of popup window.

In popup.html is one element <a id="grantexpert">...</a> and in popup.js I would like to change background color of this element when clicked. The change of color works when changed immediately after document ready. But when in click event, the color is changed for a very short time (just a blink) when clicked and then is immediately returned to original settings. It looks like popup window is reloaded again after click event.

Manifest:

  "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);

Why does the element change the color for a blink, but does not keep adjusted properties after the click event and reverts them back?

Incredible
  • 163
  • 11

4 Answers4

2

Try removing empty href on a:

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

to:

<a class="testitem" id="grantexpert">grantexpert.sk</a>
Syden
  • 8,425
  • 5
  • 26
  • 45
1

I experienced something similar. When I have a simple button on the popup like:

<button id="myButton">My Button</button>

clicking on it makes the popup being reloaded. To avoid this behaviour you need to prevent the default event from occuring. For example with jQuery:

$("#myButton").click(function(event){
  event.preventDefault(); // needed to prevent the popup from being reloaded
  // do something here
  showMessage("My Button has been clicked");
});
György Novák
  • 41
  • 1
0

this reloads the page on clicking the link. 

<a href ...

try adding a NOP to the link 

<a href="javascript:;" ...

or removing it like other suggest 

<a ...

This is a similar question Is an empty href valid? and Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

Community
  • 1
  • 1
corn3lius
  • 4,857
  • 2
  • 31
  • 36
0

Remove the href from the tag. The href will change the url of the popup causing the popup to refresh. By removing it you will not change the url on click.

xagos
  • 98
  • 1
  • 10