How do I update value of input on blur

Question

Trying to figure out why this code auto unfocused when I click it -

the idea is when the url param's action = edit these fields are editable - with what I have at this point I can switch to edit mode, click the title, get the context into the placeholder - problem is when I then click inside the input field to edit it, it goes white and the cursor leaves instantly...

var getUrlParameter = function getUrlParameter(sParam) {
  var sPageURL = window.location.search.substring(1),
    sURLVariables = sPageURL.split('&'),
    sParameterName,
    i;
  for (i = 0; i < sURLVariables.length; i++) {
    sParameterName = sURLVariables[i].split('=');
    if (sParameterName[0] === sParam) {
      return typeof sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
    }
  }
  return false;
};

//fa-clone send to index.php?action=edit
$('.fa-clone').on('click', function(event) {
  window.location.replace("index.php?action=edit");
})

//edit Param
$('.card-title').on('click', function(event) {
  var id = $(this).prop('id');
  var context = $(this).text();
  if (getUrlParameter('action') == 'edit') {
    $(this).html("<input type='text' name='card-edit' placeholder='" + context + "'>");
    // on blur send ajax request
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet">
<div class="col-sm-3">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title" id='.$id.'>'.$title.'</h5>
      <p class="card-text" id='.$id.'>'.$body.'</p>
      <span class="stampDate">'.$timeIn.'</span>
      <div class="row" id="footer">
        <div class="col-sm-3">
          <i id="'.$id.'" class="fa fa-check"></i>
        </div>
        <div class="col-sm-3">
          <i class="fa fa-clone" id='.$id.'></i>
        </div>
        <div class="col-sm-3">
          <i class="fab fa-expeditedssl"></i>
        </div>
        <div class="col-sm-3">
          <i class="fa fa-eye-slash"></i>
        </div>
      </div>
    </div>
  </div>
</div>

Not related to the original problem, but I hope you're not really using the same `$id` for all the `id` attributes. IDs are supposed to be unique. — Barmar, Feb 24 '21 at 16:16

Barmar · Accepted Answer · 2021-02-24T16:21:24.470

1

When you click on the input, the click event bubbles up to the <h5> element, so it replaces the input with another input.

You can check whether the click actually occurred on the <h5> or a nested element, and only perform the action when it's on the <h5>. event.target is the element that was actually clicked on, while event.currentTarget is the element that the handler was bound to.

//edit Param
$('.card-title').on('click', function(event) {
  if (event.target != event.currentTarget) {
    return;
  }
  var id = $(this).prop('id');
  var context = $(this).text();
  if (getUrlParameter('action') == 'edit') {
    $(this).html("<input type='text' name='card-edit' placeholder='" + context + "'>");
  }
})

$('.card-title').on('blur', '[name=card-edit]', function() {
  console.log("blurred");
  $(this).closest(".card-title").text($(this).val());
});

function getUrlParameter() {
  return 'edit';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h5 class="card-title" id="id">Card Title</h5>

edited Feb 24 '21 at 16:21

answered Feb 23 '21 at 20:31

Barmar

741,623
53
500
612

quick follow up - at this stage if you wanted to now trigger something when the mouse leaves the input would you use the blur()? – jeffrey desjardins Feb 23 '21 at 20:35
Yes. But since you're adding the input dynamically, see https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Barmar Feb 23 '21 at 20:37
BTW, it seems like you're reimplementing the functionality already available with `contenteditable` – Barmar Feb 23 '21 at 20:37
hmmm didn't know about it - when I'm now changing this input field on click, is this input field still tied to $(this) or event.currentTarget? cause either of them don't fire on blur()? – jeffrey desjardins Feb 23 '21 at 20:46
The blur event fires on the input field, although it should also bubble out. – Barmar Feb 23 '21 at 20:47
Did you use event delegation? `$('.card-title').on('blur', '[name=card-edit]', function(event) { ... })` – Barmar Feb 23 '21 at 20:48
I did yes using $('.card-title').on('blur', '[name=card-edit]',function() { console.log('this left focus'); }) – jeffrey desjardins Feb 23 '21 at 21:32
it dosn't fire the console.log? – jeffrey desjardins Feb 23 '21 at 21:33
I've added the blue code that demonstrates that it works. – Barmar Feb 24 '21 at 16:21

How do I update value of input on blur

1 Answers1