我正在嘗試用 P 元素替換輸入，該元素包含輸入上所寫的內容。我試過不做if，但它仍然行不通。整個 replaceWith 只是不作業。最終結果將是具有屬性 class = " task m-auto" time = "00:00" 的 P 元素
我已經嘗試在多個地方多次更改該功能，但我仍然可以做到
$(".task").each(function () {
$(this).on("click", function () {
var text = $(this).text().trim();
var time = $(this).attr("time");
console.log(time);
if (text === "Enter task here") {
var textInput = $("<input>").prop("maxlength", "114");
$(this).replaceWith(textInput);
}
else {
var textInput = $("<input>").prop("maxlength", "114").val(text);
$(this).replaceWith(textInput);
}
textInput.trigger("focus");
});
$(this).on("blur", "input", function () {
var text = $(this).val();
var taskP = $("<p>").addClass("hour m-auto").text(text);
console.log(taskP)
if (text === null || text === "") {
$("<p>").addClass("hour m-auto").prop("time", time).text("Enter task here");
console.log("good")
}
else {
$(this).replaceWith(taskP);
console.log("bad")
}
});
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="timeList w-100 mt-3">
<li class="timeSlot row shadow-sm mr-3 p-3 rounded">
<div class="slotMinutes m-auto col-1">09:00</div>
<div class="taskWrapper m-auto col-10">
<p class="task m-auto" time="09:00">Enter task here</p>
</div>
<div class="col-1">
<button class="save"><i class="bi bi-check-square"></i></button>
</div>
</li>
<li class="timeSlot row shadow-sm mr-3 p-3 rounded">
<div class="slotMinutes m-auto col-1">09:10</div>
<div class="taskWrapper m-auto col-10">
<p class="task m-auto" time="09:10">Enter task here</p>
</div>
<div class="col-1">
<button class="save"><i class="bi bi-check-square"></i></button>
</div>
</li>
<li class="timeSlot row shadow-sm mr-3 p-3 rounded">
<div class="slotMinutes m-auto col-1">09:20</div>
<div class="taskWrapper m-auto col-10">
<p class="task m-auto" time="09:20">Enter task here</p>
</div>
<div class="col-1">
<button class="save"><i class="bi bi-check-square"></i></button>
</div>
</li>
<li class="timeSlot row shadow-sm mr-3 p-3 rounded">
<div class="slotMinutes m-auto col-1">09:30</div>
<div class="taskWrapper m-auto col-10">
<p class="task m-auto" time="09:30">Enter task here</p>
</div>
<div class="col-1">
<button class="save"><i class="bi bi-check-square"></i></button>
</div>
</li>
<li class="timeSlot row shadow-sm mr-3 p-3 rounded">
<div class="slotMinutes m-auto col-1">09:40</div>
<div class="taskWrapper m-auto col-10">
<p class="task m-auto" time="09:40">Enter task here</p>
</div>
<div class="col-1">
<button class="save"><i class="bi bi-check-square"></i></button>
</div>
</li>
<li class="timeSlot row shadow-sm mr-3 p-3 rounded">
<div class="slotMinutes m-auto col-1">09:50</div>
<div class="taskWrapper m-auto col-10">
<p class="task m-auto" time="09:50">Enter task here</p>
</div>
<div class="col-1">
<button class="save"><i class="bi bi-check-square"></i></button>
</div>
</li>
</ol>uj5u.com熱心網友回復：
好的，希望這能讓您朝著正確的方向前進。
您遇到的問題是您正在向尚不存在的元素添加“模糊”事件。
在下面查看延遲事件處理的使用：
$(".timeList").on("click", "p.task", function(e)
{
var text = $(this).text().trim();
var time = $(this).attr("time");
if (text === "Enter task here")
text = "";
let $textInput = $("<input>").addClass("task").attr("maxlength", "114").val(text);
$(this).replaceWith($textInput);
$textInput.trigger("focus");
});
$(".timeList").on("blur", "input.task", function(e)
{
var text = $(this).val().trim();
if(text === "") text = "Enter task here";
var $taskP = $("<p>").addClass("task hour m-auto").text(text);
$(this).replaceWith($taskP);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="timeList w-100 mt-3">
<li class="timeSlot row shadow-sm mr-3 p-3 rounded">
<div class="slotMinutes m-auto col-1">09:00</div>
<div class="taskWrapper m-auto col-10">
<p class="task m-auto" time="09:00">Enter task here</p>
</div>
<div class="col-1">
<button class="save"><i class="bi bi-check-square"></i></button>
</div>
</li>
<li class="timeSlot row shadow-sm mr-3 p-3 rounded">
<div class="slotMinutes m-auto col-1">09:10</div>
<div class="taskWrapper m-auto col-10">
<p class="task m-auto" time="09:10">Enter task here</p>
</div>
<div class="col-1">
<button class="save"><i class="bi bi-check-square"></i></button>
</div>
</li>
<li class="timeSlot row shadow-sm mr-3 p-3 rounded">
<div class="slotMinutes m-auto col-1">09:20</div>
<div class="taskWrapper m-auto col-10">
<p class="task m-auto" time="09:20">Enter task here</p>
</div>
<div class="col-1">
<button class="save"><i class="bi bi-check-square"></i></button>
</div>
</li>
<li class="timeSlot row shadow-sm mr-3 p-3 rounded">
<div class="slotMinutes m-auto col-1">09:30</div>
<div class="taskWrapper m-auto col-10">
<p class="task m-auto" time="09:30">Enter task here</p>
</div>
<div class="col-1">
<button class="save"><i class="bi bi-check-square"></i></button>
</div>
</li>
<li class="timeSlot row shadow-sm mr-3 p-3 rounded">
<div class="slotMinutes m-auto col-1">09:40</div>
<div class="taskWrapper m-auto col-10">
<p class="task m-auto" time="09:40">Enter task here</p>
</div>
<div class="col-1">
<button class="save"><i class="bi bi-check-square"></i></button>
</div>
</li>
<li class="timeSlot row shadow-sm mr-3 p-3 rounded">
<div class="slotMinutes m-auto col-1">09:50</div>
<div class="taskWrapper m-auto col-10">
<p class="task m-auto" time="09:50">Enter task here</p>
</div>
<div class="col-1">
<button class="save"><i class="bi bi-check-square"></i></button>
</div>
</li>
</ol>uj5u.com熱心網友回復：
$(document).on("click", ".task", function() {
var text = $(this).text().trim();
var time = $(this).attr("time");
console.log(time);
if (text === "Enter task here") {
var textInput = $("<input>").prop("maxlength", "114");
$(this).replaceWith(textInput);
} else {
var textInput = $("<input>").prop("maxlength", "114").val(text);
$(this).replaceWith(textInput);
}
textInput.trigger("focus");}); $(document).on("blur", "input", function() {
var text = $(this).val();
var taskP = $("<p>").addClass("hour m-auto").text(text);
console.log(taskP)
if (text === null || text === "") {
$("<p>").addClass("hour m-auto").prop("time", time).text("Enter task here");
console.log("good")
} else {
$(this).replaceWith(taskP);
console.log("bad")
}});
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/486587.html