Conflict when importing another Jquery in Wordpress

Question

Hey, how you doing? I’m with a little problem that has already consumed me a lot of time, I’m trying to put a mask for time in an input field, the code is already ok and running the problem is when I import the js library into the head of my header.php, because it uga the rest of my entire site, tried in some ways to import but nothing at the moment resolves, tried in the following ways:

var mask = function (val) {
    val = val.split(":");
    return (parseInt(val[0]) > 19)? "HZ:M0" : "H0:M0";
}

pattern = {
    onKeyPress: function(val, e, field, options) {
        field.mask(mask.apply({}, arguments), options);
    },
    translation: {
        'H': { pattern: /[0-2]/, optional: false },
        'Z': { pattern: /[0-3]/, optional: false },
        'M': { pattern: /[0-5]/, optional: false }
    },
    placeholder: 'hh:mm'
};

var $a = jQuery.noConflict()
$a(document).ready(function () {
  $a("#QuantidadeHoras").mask(mask, pattern);
});


 wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js');
    wp_enqueue_script( 'jquery' );

     wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.min.js');
    wp_enqueue_script( 'jquery' );

Answer 1

Just one question, why are you adding JS to header.php? Try to include it in footer.php (if you have it)

Try to do that:

Do this, replace this: var $a = jQuery.noConflict() $a(document).ready(function () { $a("#QuantidadeHoras").mask(mask, pattern); }); therefore:

(function (document, $){ $('#QuantidadeHoras').mask(mask, pattern); }(document, jQuery)

OR :

jQuery(function(document).ready(){ $('#QuantidadeHoras').mask(mask, pattern); })

If I didn’t answer your question, I apologize.