0

Code that I wrote is as below.

<div><a class="skill_1">skill</a></div>
<p id="skill_desc_1">skill description - 1</p>

Below JS code is expected to load popup window upon click on .skill_1 element. however, somehow after first click on .skill_1, whenever I click on elsewhere of website, the click event is executed. as I'm pretty new with JS, I'm really struggling to find out the cause of the issue. perhaps I wrote totally wrong code, can somebody help me out?

I'm using popup.js plugin just for information.

 $(document).ready(function () {
    /* Forcing hidden content to each skill item */
    var options = { content: $('#skill_desc_1')};

    /* popup skill description */
    $('a.skill_1').click(function(){
        $(this).popup(options);
    });
});
Yunjae Oh
  • 111
  • 1
  • 2
  • 6
  • 1
    You probably want 'class' instead of 'id' for 'skill_desc_1'. This probably won't fix your problem but just a point of order. – orolo Feb 02 '17 at 21:07
  • Could be that your `a.skill_1` is filling the entire viewport? That way it would seem that *anywhere* you click it is triggering the popup. Just a thought. – daniel0mullins Feb 02 '17 at 21:08
  • thanks for comment, @daniel0mullins. when we say a.skill_1 is filling entire viewport, it means the element occupy whole page? I have specified width and height of the box by CSS, do you think it can be viewport issue? – Yunjae Oh Feb 02 '17 at 21:16

1 Answers1

0

You might try data-rel and data-role as described in the following link instead of popup():

http://api.jquerymobile.com/popup/

Roger
  • 131
  • 2
  • 12