Trying to replace Input with P-CodePudding

I am trying to replace the input with the P element which contains what was written on the Input. I have tried not making the if, but it still won't work. the whole replaceWith is just not working. The end result would be the P element with the attributes class = " task m-auto" time = "00:00"

I have tried changing the function multiple times in multiple places and I still can manage to do it

$(".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 >
          <li >
            <div >09:00</div>
            <div >
              <p  time="09:00">Enter task here</p>
            </div>
            <div >
              <button ><i ></i></button>
            </div>
          </li>
          <li >
            <div >09:10</div>
            <div >
              <p  time="09:10">Enter task here</p>
            </div>
            <div >
              <button ><i ></i></button>
            </div>
          </li>
          <li >
            <div >09:20</div>
            <div >
              <p  time="09:20">Enter task here</p>
            </div>
            <div >
              <button ><i ></i></button>
            </div>
          </li>
          <li >
            <div >09:30</div>
            <div >
              <p  time="09:30">Enter task here</p>
            </div>
            <div >
              <button ><i ></i></button>
            </div>
          </li>
          <li >
            <div >09:40</div>
            <div >
              <p  time="09:40">Enter task here</p>
            </div>
            <div >
              <button ><i ></i></button>
            </div>
          </li>
          <li >
            <div >09:50</div>
            <div >
              <p  time="09:50">Enter task here</p>
            </div>
            <div >
              <button ><i ></i></button>
            </div>
          </li>
        </ol>

CodePudding user response：

OK, hopefully this set you in the right direction.

The problem you had was that you were adding the "blur" event to elements that didn't exist yet.

Check out the use of deferred event handling below:

$(".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 >
  <li >
    <div >09:00</div>
    <div >
      <p  time="09:00">Enter task here</p>
    </div>
    <div >
      <button ><i ></i></button>
    </div>
  </li>
  <li >
    <div >09:10</div>
    <div >
      <p  time="09:10">Enter task here</p>
    </div>
    <div >
      <button ><i ></i></button>
    </div>
  </li>
  <li >
    <div >09:20</div>
    <div >
      <p  time="09:20">Enter task here</p>
    </div>
    <div >
      <button ><i ></i></button>
    </div>
  </li>
  <li >
    <div >09:30</div>
    <div >
      <p  time="09:30">Enter task here</p>
    </div>
    <div >
      <button ><i ></i></button>
    </div>
  </li>
  <li >
    <div >09:40</div>
    <div >
      <p  time="09:40">Enter task here</p>
    </div>
    <div >
      <button ><i ></i></button>
    </div>
  </li>
  <li >
    <div >09:50</div>
    <div >
      <p  time="09:50">Enter task here</p>
    </div>
    <div >
      <button ><i ></i></button>
    </div>
  </li>
</ol>

CodePudding user response：

$(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")
}});