为什么我的jQuery动态链接克隆不起作用？

Question

我正在尝试克隆链接，以使一系列图像可点击的链接。 我尝试使用jQuery中的一些代码示例-将动态链接从一个元素复制到另一个 。 没用

给出以下HTML代码：

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

我正在寻找以下结果，其中代码的第4行是唯一更改的行（将img与克隆的锚标记包围）：

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

我根据链接的Stack Overflow帖子尝试了两种不同的代码版本：

版本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(''); 
  });
});

版本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错误。 有一个针对jQuery最小化JavaScript本身的警告“不赞成使用getPreventDefault（）。请改用defaultPrevented。” 但这已经发生了，并且不会阻止我网站上已经存在的jQuery代码起作用。

有什么想法/更正吗？

Answer 1

而是尝试使用其他方式。

当您尝试单击图像时，请尝试触发链接上的click事件，因为两者都具有相同的url。