Conflict between a Jquery call and a js file

Question

I’m having a problem in a function using Jquery and a file I call inside my html that are giving conflict, it’s only working one, I tried using jQuery.noConflict() but apparently it didn’t work, I don’t know I used it correctly follows the script and call that are conflicting:

<script>
var $JQuery = jQuery.noConflict()
$jQuery(document).ready(function($) { 
   $(".page-scroll").click(function(event){        
    event.preventDefault();
   $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);
    });
});
</script>  
<script src="/js/demo.js"></script>

Answer 1

The argument passed to the callback of the method ready refers to selection, in your case document. That is, you are receiving the variable $ as a reference to document and not to the jQuery.

Probably what you want to do is something similar to the examples below:

// utilizar a variável que você criou $jQuery
var $JQuery = jQuery.noConflict()
$JQuery(document).ready(function() {
    $JQuery(".page-scroll").click(function() { /* ... */ });
});

// ou remover a variável $ do escopo global e utilizar apenas como jQuery
jQuery.noConflict()
jQuery(document).ready(function() {
    jQuery(".page-scroll").click(function() { /* ... */ });
});

// ou OUTRA biblioteca semelhante ao jQuery que use o $
jQuery.noConflict()
jQuery(document).ready(function() {
    $(".page-scroll").click(function() { /* ... */ });
});

// ou utilizar o jQuery como $ apenas neste arquivo e não globalmente
jQuery.noConflict()
(function($) {
    $(document).ready(function() {
        $(".page-scroll").click(function() { /* ... */ });
    });
}(jQuery));