jquery blur funktioniert nicht/Triggerung

Question

Ich weiß nicht viel über jquery und Javascript. Dies ist mein Code für Eingabe von Text, wo ich Unschärfe verwenden möchten das Feld

<div class="form-row form-input-name-row" > 

       <label> 
        <span>Full name</span> 
        <input id="txt_name" type="text" name="name"> 
       </label> 

       <!-- 
        Add these three elements to every form row. They will be shown by the 
        .form-valid-data and .form-invalid-data classes (see the JS for an example). 
       --> 

       <span class="form-valid-data-sign"><i class="fa fa-check"></i></span> 

       <span class="form-invalid-data-sign"><i class="fa fa-close"></i></span> 
       <span class="form-invalid-data-info"></span> 

      </div> 

das ist mein Javascript-Code zu bestätigen, wo ich die Unschärfefunktion

<script type="text/javascript"> 


    $(document).ready(function() { 

     // Here is how to show an error message next to a form field 
$("#txt_name").blur(function() { 

     var errorField = $('.form-input-name-row'); 

     // Adding the form-invalid-data class will show 
     // the error message and the red x for that field 

     errorField.addClass('form-invalid-data'); 
     errorField.find('.form-invalid-data-info').text('Please enter your name'); 

});​ 
     // Here is how to mark a field with a green check mark 

     var successField = $('.form-input-email-row'); 

     successField.addClass('form-valid-data'); 



    }); 
    $(".clicker").click(function(){ 
    $(".file").click(); 
}); 



function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      $('#blah').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 



</script> 

ich Bootstrap mit bin auch hinzugefügt haben, können jemand erzählt, warum Unschärfe nicht feuert?

Answer 1

https://jsfiddle.net/ra3bbtow/

});​ // Here is how to mark a field with a green check mark 

Es gibt einen roten Punkt, das ist ein Zeichen, das nicht in meinem ide zeigt wurde. Danke an @MedetAhmetsonAtabayev

Answer 2

Das Ereignis blur wird ausgelöst. Hier ist Ihr Code mit alert() im Blur Callback.

PS. Nur ein kurzer Hinweis. blur wird ausgelöst, wenn Sie focus und dann "focus-out".

$(document).ready(function() { 
 

 
    // Here is how to show an error message next to a form field 
 
    $("#txt_name").blur(function() { 
 
    
 
    alert('Blur event fired!');      // < === HERE === 
 

 
    var errorField = $('.form-input-name-row'); 
 

 
    // Adding the form-invalid-data class will show 
 
    // the error message and the red x for that field 
 

 
    errorField.addClass('form-invalid-data'); 
 
    errorField.find('.form-invalid-data-info').text('Please enter your name'); 
 

 
    }); 
 
    // Here is how to mark a field with a green check mark 
 

 
    var successField = $('.form-input-email-row'); 
 

 
    successField.addClass('form-valid-data'); 
 
}); 
 

 
$(".clicker").click(function() { 
 
    $(".file").click(); 
 
}); 
 

 
function readURL(input) { 
 
    if (input.files && input.files[0]) { 
 
    var reader = new FileReader(); 
 
    reader.onload = function(e) { 
 
     $('#blah').attr('src', e.target.result); 
 
    } 
 

 
    reader.readAsDataURL(input.files[0]); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="form-row form-input-name-row"> 
 

 
    <label> 
 
    <span>Full name</span> 
 
    <input id="txt_name" type="text" name="name"> 
 
    </label> 
 

 
    <!-- 
 
    Add these three elements to every form row. They will be shown by the 
 
    .form-valid-data and .form-invalid-data classes (see the JS for an example). 
 
    --> 
 

 
    <span class="form-valid-data-sign"><i class="fa fa-check"></i></span> 
 
    <span class="form-invalid-data-sign"><i class="fa fa-close"></i></span> 
 
    <span class="form-invalid-data-info"></span> 
 

 
</div>

Answer 3

errorField.addClass('form-invalid-data'); 
     errorField.find('.form-invalid-data-info').text('Please enter your name'); 

});​ 

Versuchen mit diesem Code, hoffe, es wird funktionieren, ommiting Semikolon ";"

errorField.addClass('form-invalid-data'); 
     errorField.find('.form-invalid-data-info').text('Please enter your name'); 

})