How to dynamically get href links and add them to an HTML element using jQuery?

Question

I am using Sharepoint Designer and the HTML is generated automatically. The way it works now is that only the tag is clickable and the div around it is not.

<ul class="dfwp-list">
  <li>
    <div class="item" style="cursor: pointer;">
      <div class="image-area-left">
        <a href="/Agencies/accounting/Pages/default.aspx"><img class="image"
            src="/Agencies/PublishingImages/file-invoice-dollar.svg" title=""></a>
      </div>
      <div class="link-item"><a href="/Agencies/accounting/Pages/default.aspx" title="Accounting Division">Accounting
          Division</a>
        <div class="description"></div>
      </div>
    </div>
  </li>
  <li>
    <div class="item" style="cursor: pointer;">
      <div class="image-area-left">
        <a href="/Agencies/air/Pages/default.aspx"><img class="image" src="/Agencies/PublishingImages/wind.svg"
            title=""></a>
      </div>
      <div class="link-item"><a href="/Agencies/air/Pages/default.aspx" title="Air Quality Program">Air Quality
          Program</a>
        <div class="description"></div>
      </div>
    </div>
  </li>
  <li>
    <div class="item">
      <div class="image-area-left">
        <a href="/Agencies/aviation/Pages/default.aspx"><img class="image"
            src="/Agencies/PublishingImages/plane-departure.svg" title=""></a>
      </div>
      <div class="link-item"><a href="/Agencies/aviation/Pages/default.aspx" title="Aviation Department">Aviation
          Department</a>
        <div class="description"></div>
      </div>
    </div>
  </li>
  <li>
    <div class="item" style="cursor: pointer;">
      <div class="image-area-left">
        <a href="/Agencies/healthcare/Pages/default.aspx"><img class="image"
            src="/Agencies/PublishingImages/building.svg" title=""></a>
      </div>
      <div class="link-item"><a href="/Agencies/healthcare/Pages/default.aspx"
          title="Broward Addiction &amp; Recovery Center">Broward Addiction &amp; Recovery Center</a>
        <div class="description"></div>
      </div>
    </div>
  </li>
  <li>
    <div class="item">
      <div class="image-area-left">
        <a href="/Agencies/budget"><img class="image" src="/Agencies/PublishingImages/money-bill-alt.svg" title=""></a>
      </div>
      <div class="link-item"><a href="/Agencies/budget" title="Budget &amp; Management">Budget &amp; Management</a>
        <div class="description"></div>
      </div>
    </div>
  </li>
  <li>
    <div class="item">
      <div class="image-area-left">
        <a href="/Agencies/callcenter/Pages/default.aspx"><img class="image" src="/Agencies/PublishingImages/phone.svg"
            title=""></a>
      </div>
      <div class="link-item"><a href="/Agencies/callcenter/Pages/default.aspx" title="Call Center">Call Center</a>
        <div class="description"></div>
      </div>
    </div>
  </li>
  <li>
    <div class="item">
      <div class="image-area-left">
        <a href="/Agencies/construction/Pages/default.aspx"><img class="image"
            src="/Agencies/PublishingImages/toolbox.svg" title=""></a>
      </div>
      <div class="link-item"><a href="/Agencies/construction/Pages/default.aspx"
          title="Construction Management Division">Construction Management Division</a>
        <div class="description"></div>
      </div>
    </div>
  </li>
  <li>
    <div class="item">
      <div class="image-area-left">
        <a href="/Agencies/administrator/Pages/default.aspx"><img class="image"
            src="/Agencies/PublishingImages/folder-open.svg" title=""></a>
      </div>
      <div class="link-item"><a href="/Agencies/administrator/Pages/default.aspx"
          title="County Administrator's Office">County Administrator's Office</a>
        <div class="description"></div>
      </div>
    </div>
  </li>
  <li>
    <div class="item">
      <div class="image-area-left">
        <a href="/Agencies/econdev/Pages/default.aspx"><img class="image"
            src="/Agencies/PublishingImages/chart-area.svg" title=""></a>
      </div>
      <div class="link-item"><a href="/Agencies/econdev/Pages/default.aspx"
          title="Economic &amp; Small Business Dev.">Economic &amp; Small Business Dev.</a>
        <div class="description"></div>
      </div>
    </div>
  </li>
  <li>
    <div class="item">
      <div class="image-area-left">
        <a href="/Agencies/eldervets/Pages/default.aspx"><img class="image"
            src="/Agencies/PublishingImages/handshake.svg" title=""></a>
      </div>
      <div class="link-item"><a href="/Agencies/eldervets/Pages/default.aspx"
          title="Elderly &amp; Veteran's Services Division">Elderly &amp; Veteran's Services Division</a>
        <div class="description"></div>
      </div>
    </div>
  </li>
  <li>
    <div class="item">
      <div class="image-area-left">
        <a href="/Agencies/EmergencyManagement/Pages/default.aspx"><img class="image"
            src="/Agencies/PublishingImages/ambulance.svg" title=""></a>
      </div>
      <div class="link-item"><a href="/Agencies/EmergencyManagement/Pages/default.aspx"
          title="Emergency Management">Emergency Management</a>
        <div class="description"></div>
      </div>
    </div>
  </li>
  <li>
    <div class="item">
      <div class="image-area-left">
        <a href="/Agencies/EAP/Pages/default.aspx"><img class="image" src="/Agencies/PublishingImages/user.svg"
            title=""></a>
      </div>
      <div class="link-item"><a href="/Agencies/EAP/Pages/default.aspx" title="Employee Assistance Program">Employee
          Assistance Program</a>
        <div class="description"></div>
      </div>
    </div>
  </li>
</ul>

I am creating a code that gets the href of the clicked element and directs the user to the page on click. But what happens is that when I click it sends me to the same page instead of the url that belongs to the clicked event.

$(".item").hover(function(){
    $(this).css('cursor', 'pointer');
});
$(".item").click(function(event) {
    var href = $('.item a').attr('href');
    window.location = href;
    event.preventDefault();
});

Instead of var href = $('.item a').attr('href');, try var href = $('.item div a').attr('href'); — Rob Moll
– Rob Moll, Commented Jan 21, 2020 at 19:20
@RobMoll thanks for your answer; I tried your code but all the links clicked go to the same url — DigiDev
– DigiDev, Commented Jan 21, 2020 at 19:24
Also change window.location = href; to window.location.href = href — Rob Moll
– Rob Moll, Commented Jan 21, 2020 at 19:27
...and put event.preventDefault(); as the first line inside the function - like this: $(".item").click(function(event) { event.preventDefault(); var href = $('.item a').attr('href'); window.location = href; }); — Rob Moll
– Rob Moll, Commented Jan 21, 2020 at 19:31
@RobMoll still getting the same result. When I click it goes to the same url which is the first item of the list — DigiDev
– DigiDev, Commented Jan 21, 2020 at 19:34

CNKR · Accepted Answer · 2020-01-21 19:49:02Z

1

Try this

$(".item").hover(function(){
    $(this).css('cursor', 'pointer');
});
$(".item").click(function(event) {
    var href = $(this).find('a').attr('href');
    window.location = href;
    event.preventDefault();
});

answered Jan 21, 2020 at 19:49

CNKR

5785 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to dynamically get href links and add them to an HTML element using jQuery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related