Why isn't my jQuery dynamic link clone working?

Question

I'm trying to clone links in order to make a series of images clickable links. I tried using some of the code examples in jQuery - Copy a dynamic link from one element to another . It's not working.

Given the following HTML code:

<ul class="slides">        
  <li class="views-row views-row-1 views-row-odd views-row-first">
    <div>
      <img src="https://www.sfmta.com/sites/default/files/styles/home_slide/public/homeslides/2017/Clipper%20on%20Muni-1.png?itok=PPZNHt_N" width="630" height="369" alt="Image with a Clipper Card and illustrated Muni bus with text: Get Clipper and save on Muni." title="Get Clipper and save on Muni" />
    </div>
    <div class="slider-caption">
  <div class="row-fluid">
        <div class="span6 offset6">
          <div class="slider-caption-inner">
            <h2>
              <a href="https://www.sfmta.com/about-sfmta/blog/jan-1-muni-fare-changes-include-cash-free-benefits-extended-youth-discounts">New Muni Fare Changes</a>
            </h2>
        <p>New Muni fares include single-ride savings for using Clipper and MuniMobile.</p>
            <a href="https://www.sfmta.com/about-sfmta/blog/jan-1-muni-fare-changes-include-cash-free-benefits-extended-youth-discounts">Learn more</a>         
          </div>
        </div>
  </div>
    </div>
  </li>
... (more list items)
</ul>

I am seeking the following result, with line 4 of the code being the only changed line (surrounding img with a cloned anchor tag):

<ul class="slides">        
  <li class="views-row views-row-1 views-row-odd views-row-first">
    <div>
      <a href="https://www.sfmta.com/about-sfmta/blog/jan-1-muni-fare-changes-include-cash-free-benefits-extended-youth-discounts"><img src="https://www.sfmta.com/sites/default/files/styles/home_slide/public/homeslides/2017/Clipper%20on%20Muni-1.png?itok=PPZNHt_N" width="630" height="369" alt="Image with a Clipper Card and illustrated Muni bus with text: Get Clipper and save on Muni." title="Get Clipper and save on Muni" /></a>
    </div>
    <div class="slider-caption">
  <div class="row-fluid">
        <div class="span6 offset6">
          <div class="slider-caption-inner">
            <h2>
              <a href="https://www.sfmta.com/about-sfmta/blog/jan-1-muni-fare-changes-include-cash-free-benefits-extended-youth-discounts">New Muni Fare Changes</a>
            </h2>
        <p>New Muni fares include single-ride savings for using Clipper and MuniMobile.</p>
            <a href="https://www.sfmta.com/about-sfmta/blog/jan-1-muni-fare-changes-include-cash-free-benefits-extended-youth-discounts">Learn more</a>         
          </div>
        </div>
  </div>
    </div>
  </li>
...
</ul>

I tried two different code versions based on the linked Stack Overflow post:

Version 1:

jQuery(document).ready(function() {
  "use strict";
  jQuery('.slides .views-row .img').wrap(function() {
    return jQuery(this).closest('.views-row').find('h2 a').clone().text(''); 
  });
});

Version 2:

jQuery(document).ready(function() {
  "use strict";
  jQuery('.slides .views-row .img').html(function(i,html) {
    return $(this).next('h2').find('a').clone().html( html );
  });
});

Neither code works. The images in the list do not become linked. The HTML code remains unchanged. (Tested in Firefox and Chrome on Windows.)

There is no JavaScript error on my browser console. There is a warning against jQuery minimized JavaScript itself "Use of getPreventDefault() is deprecated. Use defaultPrevented instead." but that's already been happening and does not prevent already-existing jQuery code on my site from working.

Any ideas/corrections?

Answer 1

Instead try to use a different way.

When you try to click on image, try to trigger a click event on link as both having a same url.