1

I'm struggling with a very simple problem that I can't solve.

I'm using Framework7 (JS Framework for mobile application) and I have two list in my page:

First list:

<ul>
     <li>
         <a id="android" class="link external" target="_blank" href="android_link"></a>
     </li>
     <li>
         <a id="iOS" class="link external" target="_blank" href="ios_link"></a>
     </li>
     <li>
         <a id="windows" class="link external" target="_blank" href="windows_link"></a>
     </li>                                   
 </ul>

Second list: 

<ul>
    <li>
        <a href="fb_link" target="_blank"  class="item-link item-content link external" id="facebook">
            <div class="item-media">
                <i class="f7-icons">logo_facebook</i>
            </div>
            <div class="item-inner">
                <div class="item-title">Facebook</div>
            </div>
         </a>
    </li>

    <li>
        <a href=instagram_link" target="_blank"  class="item-link item-content link external" id="instagram">
            <div class="item-media">
                <i class="f7-icons">logo_instagram</i>
            </div>
            <div class="item-inner">
                <div class="item-title">Instagram</div>
            </div>
         </a>
    </li>                                  
</ul>

So, I need to take the href attribute on click event. I wrote this: 

Dom7('.link.external').on('click', (event) => {
    // First try
    href = event.target.getAttribute('href')
    console.log(href)

    // Second trye
    console.log(event.srcElement.href)

    // Third try
    var href = Dom7('a.link.external').attr('href');
    var id = Dom7('a.link.external').attr('id');
    console.log(href)
    console.log(id)

  })

I've tried three different solutions, but none of them work.

The first one and second one works only for the first list, I think because the <a> tag doesn't contains html inside.

The third one always return me the href and id of the first elements of the first list (android), even if I click in the second list.

Can you help me to solve this problem?

Aso Strife
  • 1,089
  • 3
  • 12
  • 31

3 Answers3

3

Solution 1

<ul>
 <li>
     <a id="android" class="link external" target="_blank" href="android_link" onclick="linkClicked(this); return false;"></a>
 </li>                                  
</ul>

<script>
  function linkClicked(object) {
      consile.log(object.getAttribute("href"));
      return false;
  }
</script>

Solution 2

var elements = document.getElementsByClassName('link');

for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', linkClicked, false);
}

function linkClicked() {
    console.log(this.getAttribute("href"));
};
Chawki Messaoudi
  • 714
  • 2
  • 6
  • 18
0

No need to fix what's not broken! (well, maybe the missing " before instagram_link")

The problem is that, in the second list, the event's target (i.e., what's being clicked) is the image italicized text, which has no href. That's why it seems like it's only working on the first list.

You need to "go up" till you hit the anchor since that's the one containing the href. In this case, the target's parent's parent's href: event.target.parentNode.parentNode.href

Or event.target.parentNode.parentNode.getAttribute("href"), if you want the attribute instead of the property. You may read about the differences in this answer.

$('body').on('click', (event) => {
  event.preventDefault();
  granny = event.target.parentNode.parentNode;
  target = event.target;
  if (granny.id) {
    console.log("granny's id: " + granny.id + "\nhref property: " + granny.href + "\nhref attribute: " + granny.getAttribute("href"));
  }
  if (target.id) {
    console.log("target id: " + target.id + "\nhref property: " + target.href + "\nhref attribute: " + target.getAttribute("href"));
  }
  if (target.id === "clear"){
    console.clear();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<a id="clear" href="">Clear console</a><br><br>

<b>First list:</b>

<ul>
  <li>
    <a id="android" class="link external" target="_blank" href="android_link">android</a>
  </li>
  <li>
    <a id="iOS" class="link external" target="_blank" href="ios_link">ios</a>
  </li>
  <li>
    <a id="windows" class="link external" target="_blank" href="windows_link">windows</a>
  </li>
</ul>

<b>Second list:</b>

<ul>
  <li>
    <a href="fb_link" target="_blank" class="item-link item-content link external" id="facebook">
      <div class="item-media">
        <i class="f7-icons">logo_facebook</i>
      </div>
      <div class="item-inner">
        <div class="item-title">Facebook</div>
      </div>
    </a>
  </li>
  <li>
    <a href="instagram_link" target="_blank" class="item-link item-content link external" id="instagram">
      <div class="item-media">
        <i class="f7-icons">logo_instagram</i>
      </div>
      <div class="item-inner">
        <div class="item-title">Instagram</div>
      </div>
    </a>
  </li>
</ul>

Yes, I'm using jQuery but, from what I see in OP's question, it seems to share some similarity with Dom7, and the solution itself is pure Javascript. Also, feel free to bind the event elsewhere (any static parent element of your target, if you're using dynamic loading).

DystD
  • 99
  • 4
-1

if you can use jquery, use this working code : 

$('.link.external').on('click', (event) => {
href = event.target.getAttribute('href');
alert(href);

});

jsfiddle

nabilinfo
  • 47
  • 6