The jQuery error box does not work the first time I clicked on it. when i click again a second time

Question

The jQuery error box does not work the first time I clicked on it. when I click again a second time.

$(document).ready(function() { jQuery.validator.addMethod("file", function( value, element ) { var ext = value.substring(value.lastIndexOf('.') + 1); var result = this.optional(element) || ext == "csv" || ext == "CSV"; return result; }, '<div class="errorbox rateError"><div class="error-message">* Please upload only csv file</div><div class="error-arrow"></div></div>'); var $Zone = $('#ZoneZone').attr('name'); var $params = {debug:false,rules:{},messages:{}}; $params['rules'][$Zone] = {"required": true}; $params['messages'][$Zone] = {"required":'<div class="errorbox rateError"><div class="error-message">* Please enter Zone</div><div class="error-arrow"></div></div>' }; $("#ZoneAdminAddForm").validate($params); jQuery(document).on('click','.errorbox',function(){ alert("click"); $(this).fadeOut('slow',function(){ $(this).remove(); }); }); }); 

When I first clicked on the error box, nothing happened, but when I clicked it again, it gave a warning and an error message.

I also tried to specify a conflict code, but it does not work.

The same code works on another page.

Answer 1

.on () for jQuery version 1.7 and higher. If you have an older version installed, use the following command:

 $('.errorbox').live('click',function(){ $(this).fadeOut('slow',function(){ $(this).remove(); }); }); $('.errorbox').live('focus', function() { $(this).fadeOut('slow',function(){ $(this).remove(); }); }); 

Answer 2

Use on instead of live and wrap the code in document.ready . I suspect that dom elements are not loading when this code first tries to bind an event handler. The live method has been deprecated for a while, and the on method is preferred; it uses event propogation to assign event handlers to elements that are not currently visible in the DOM.

 $(document).ready(function(){ jQuery(document).on('click','.errorbox',function(){ alert("click"); $(this).fadeOut('slow',function(){ $(this).remove(); }); }); });