Onlick event not triggering which contains blur function-CodePudding

I have a form and on click on an input, I'm adding classes to that input's wrapped div.

To do this, I've made use of blur and executing my function on click. However, on some cases (very rarely) it will work (and add the class). But majority of the time, it doesn't perform the click action (because the console.log("click") doesn't appear).

My thinking is that maybe the browser is conflicting between the blur and click. I have also tried changing click to focus, but still the same results.

Demo:

$(function() {

  var input_field = $("form .input-wrapper input");
  $("form .input-wrapper").addClass("noData");


  function checkInputHasValue() {
    $(input_field).on('blur', function(e) {
      var value = $(this).val();
      if (value) {
        $(this).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("hasData");
      } else {
        $(this).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("noData");
      }
    });
  }

  $(input_field).click(function() {
    checkInputHasValue();
    console.log("click");
  });


});

CodePudding user response：

i've done some modification in your code .

function checkInputHasValue(e) {
  var value = $(e).val()
      if (value) {
        $(e).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("hasData");
      } else {
        $(e).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("noData");
      }
    
  }
  $(document).on('blur',input_field, function(e) {
    checkInputHasValue($(this));
});


  $(document).on("click",input_field,function() {
    checkInputHasValue($(this));
    console.log("click");
  });

CodePudding user response：

In order to avoid conflits between events, you would separate the events and your value check. In your code, the blur event may occur multiple times.

The following code seems ok, as far as I can tell ^^

$(function() {

  var input_field = $("form .input-wrapper input");
  $("form .input-wrapper").addClass("noData");

  function checkInputHasValue(el) {
    let target = $(el).closest(".input-wrapper");
    var value = $(el).val();
    $(target).removeClass("hasData noData");
    $(target).addClass(value.length == 0 ? "noData" : "hasData");
    
    console.log("hasData ?", $(target).hasClass("hasData"));
  }

  $(input_field).on("click", function() {
    console.log("click");
    checkInputHasValue(this);
  });

  $(input_field).on("blur", function() {
    checkInputHasValue(this);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="input-wrapper">
    <input>
  </div>
</form>