jQueryのダイナミックリンククローンが動作しないのはなぜですか？

Question

私は一連の画像をクリック可能なリンクにするためにリンクを複製しようとしています。私はjQuery - Copy a dynamic link from one element to anotherでいくつかのコード例を使ってみました。動いていない。

<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> 

：私はコードの行4は、（クローン化されたアンカータグとIMGを囲む）のみ変更行であることと、次の結果を求めている

<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> 

：

は、次のHTMLコードを考えます

バージョン1：

は、私がリンクスタックオーバーフローのポストに基づいて2つの異なるコードのバージョンを試してみました

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

バージョン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); 
    }); 
}); 

どちらのコードが動作します。リスト内の画像はリンクされません。 HTMLコードは変更されません。 （Windows上のFirefoxとChromeでテスト済み）

ブラウザのコンソールにJavaScriptエラーはありません。 JavaScript自体を最小限に抑えたjQueryに対する警告があります。「getPreventDefault（）の使用は非推奨です。代わりにdefaultPreventedを使用してください。それはすでに起こっているし、私のサイトの既存のjQueryコードが動作するのを妨げない。

アイデアや修正はありますか？

Answer 1

代わりに別の方法を使用してください。

画像をクリックしようとすると、両方のURLが同じURLを持つとしてclickイベントをトリガーしてみてください。