更改指向弹出窗口 ID jquery Mobile 的 href 属性

Question

如何使用 jquery 更改作为 jquery 移动弹出窗口的 div 的 ID 以及指向的锚点的 href弹出窗口？

在我的网络应用程序中，我有一个锚点，单击它会弹出一个 jquery 移动弹出窗口 div 所有这些都是我动态插入的。在 webapp 的任何实例中，我不知道这段代码将被插入多少次。因此，我的理解是我需要能够为 jquery 移动弹出窗口 div 动态创建一个唯一的 ID 并设置我的弹出图标的 href。

我目前无法成功地动态更改 id 和 href。我创建了以下测试 (JSFiddle Test)。

这是我的样本 html:

<div class="phone1">
  <p class="textLeft"> <strong>Number: </strong><span>(555)555-5555</span>
    <a href="#myPopup" data-rel="popup" data-transition="pop" class="my-tooltip-btn ui-corner-all ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-corner-all" title="Learn more">Learn more</a>
  </p>
    <div id="myPopup" data-role="popup" class="ui-content" data-theme="a" style="max-width:350px;">
      <p class="flagText">This number has been flagged as incorrect</p>
    </div>
</div>
<a href="#" class="ui-btn ui-btn-inline ui-btn ui-mini ui-corner-all ui-shadow" id="changeButton">Change href property</a>

这是我的样本 javascript / jquery:

$('#changeButton').click(function () {
    alert("Handler for .click() called.");
    $('.phone1 > a').prop('href', 'myNewPopup');
    $('#myPopup').attr('id', 'myNewPopup');
});

提前感谢您的帮助！

Answer 1

由于您的锚点不是 .phone1 的直接子代而是孙代，因此 > 选择器不起作用。 href 还需要 # 符号：

$('.phone1 a').prop('href', '#myNewPopup');

从技术上讲，您还应该使用 prop 来更新 id：

$('#myPopup').prop('id', 'myNewPopup');

Updated FIDDLE

您确定需要这样做吗？第一次动态插入弹出窗口后，您可以通过先测试它是否存在于 DOM 中来每次连续更新它：

if ($("#myPopup").length > 0){
    //update
} else {
    //create
}

更改指向弹出窗口 ID jquery Mobile 的 href 属性

Change href attribute pointing to popup id jquery Mobile

popup

href

jquery-mobile