jQuery .insert仅在使用类选择器后一次

Question

I have the following code that is working correctly to insert a success span after an input field when a correct value is entered. But my problem is that it adds the span every time I leave the field. From question Jquery insertAfter only once if element exist I know that I could set the ID of the span when created and check the length each time the event fires to see if it already exists. But am not sure how to do that when using a class to select the fields.

Any help with class selectors would be helpful.

$(".systemFieldName").blur(function(){
          var val = $(this).val();
          var exists = $.inArray(val,allFields);  
    if (val!="" && exists>=0){
      $("<span class='label label-success'>Valid</span>").insertAfter(this).one();
    } 
});

Answer 1

Try this fiddle: https://jsfiddle.net/8jpc74z8/

All I am doing here is to check whether there is any sibling to the systemFieldName already added. If not, then add.

 if($(".systemFieldName +.label-success").length === 0){

Answer 2

This should help.

allFields=["121",'test'];
$(".systemFieldName").blur(function(){
          var val = $(this).val();
          var exists = $.inArray(val,allFields);
          //See if the next element is a span with class label.
          var nextEl=$(this).next(); //next element
          var add=true; //add by default 
          if(nextEl.hasClass('label-success')) add=false; //don't add.

    if (val!="" && exists>=0 && add){ //only insert if all conditions are true.

      $("<span class='label label-success'>Valid</span>").insertAfter(this).one();
    }else if((val == "" || exists < 0) && !add) { // The !add means there is already the Valid span, we can safely remove nextEl, if the value changes.

      nextEl.remove();
    } 
});

https://jsfiddle.net/ym66f48p/2/

This checks to make sure the next element is a span, it also includes a remove function that if the value is altered later on, it will remove the valid span, but ONLY if the next element is already a valid span.

use 121 or test as your testing in the jsFiddle.