javascript - 如何让 jQuery DatePicker 在调用时不破坏 <span> 或 &lt;input&gt; 元素？

Question

HTML 中的某些内容或我使用 jQuery Datepicker 的方式破坏了目标元素 editable-post-name-full在此 HTML 中。该 HTML 由 WordPress 生成；我无法构建一个 fiddle 来模拟它。

这是 HTML；在单击“编辑”按钮之前，我尝试定位的跨度称为#editable-post-name。

<span id="sample-permalink">
<a href="https://www.example.com/?p=1000" target='wp-preview-2198'>https://www.example.com/<span id="editable-post-name">test-post</span>/</a>
</span>

<span id="edit-slug-buttons">
<button type="button" class="edit-slug button button-small hide-if-no-js" aria-label="Edit permalink">Edit</button>
</span>
<span id="editable-post-name-full">test-post</span>

单击“编辑”按钮后，span 标记被破坏并显示 " autocomplete="off" />/在页面源中。 splinter 的源span标签看起来像这样:

对于日期选择器，我正在使用

jQuery(document).ready(function() {
jQuery('#editable-post-name-full').each(function() {

jQuery(this).datepicker({

dateFormat: 'M-dd-yy',
showOn: "button",
                buttonImage: "../calendar.png",
                buttonImageOnly: true
           });

});
});

当我使用#new-post-slug时在jQuery函数中，DatePicker没有出现，我想是因为div #new-post-slug单击“编辑”按钮后才显示为 HTML。

是否需要仅在单击“编辑”按钮后才触发 DatePicker？

所有 jQuery 库都是 WordPress 的最新版本，包括 jQuery UI 1.11.4、jQuery Datepicker 4.5.3、jQuerty 1.12.4。站点位于私有(private)开发服务器上；网址不可用。

Answer 1

如果这不是您想要的，请原谅。我认为您希望能够激活日期选择器并使用结果来设置永久链接。我认为当你谈论破坏东西时，它可能与日期选择器期望输入而不是跨度来托管控件有关。

function getLink(postDate, postName){
  var _dateString = postDate.replace(/\//g,"")
  var _template = "https://www.example.com/{date}/{name}/";
  var _link = _template.replace("{date}", _dateString).replace("{name}", postName);
  return _link;
}

var inputName = document.getElementById("postName");
inputName.value = "test-post";

var inputDate = document.getElementById("datepicker");
inputDate.value = (new Date()).toLocaleDateString();

var inputLink = document.getElementById("permalink");
inputLink.value = getLink(inputDate.value, inputName.value);

$(inputDate).on("change", function(){
  inputLink.value = getLink(inputDate.value, inputName.value);
});

$(inputName).on("change", function(){
  inputLink.value = getLink(inputDate.value, inputName.value);
});

$(inputDate).datepicker({
  showOn: "button",
  buttonImage: "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
  buttonImageOnly: true,
  buttonText: "Select date"
});

input { width: 100%; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" />

<table style="width: 100%;">
  <tr>
    <td style="width: 100px;">Post Name:</td>
    <td><input id="postName" type="text" value="test-post"/></td>
  </tr>
  <tr>
    <td>Post Date:</td>
    <td><input id="datepicker" type="text" style="display:none;" /></td>
  </tr>
  <tr>
    <td>Permalink:</td>
    <td><input id="permalink" type="text" readonly="readonly" disabled="disabled" /></td>
  </tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>