How to get jQuery event listeners to work?

Question

I was following the instructions from the article below, but despite my efforts, I cannot get it to work. For some reason, jQuery functions are still not working. Any suggestions?

Article that described a similar problem, but did not solve my problem ( Why does jquery's document.ready not fire? )

A code sample that is attached through CEWP (Content Editor Webpart):

    <!--Adding some buttons for testing purposes-->
<div>
    <p id="viewpane"></p>

    <input type="button" value="Test Execute" onclick="Test()">
    <input type="button" value="WeWa Together" id="wewa">
    <input type="button" id = "btn1" value="jQuery doesnt work" title="Filter">
</div>

<script type="text/javascript" src="___ERASED___/SiteAssets/JQuery321.min.js">
</script>

<script type="text/javascript">
    // Test # 1 =  Boring~
    function Test() {
        alert('Hello World');
    }

    // Test # 2 = Vanilla event listener
    var weWa = document.getElementById('wewa');
    weWa.addEventListener('click', function() {
        alert('Sup?');
    }, false);

    // Test # 3 = jQuery approach test
    jQuery.noConflict(); //This was captured through breakpoints, which probably executed, but it did not get into $(document).ready(); for sure

    jQuery(document).ready(function(){
        jQuery("btn1").click(function(){
            alert('Hi girl!'); // Hi girl never displayed

            var siteurl = _spPageContextInfo.webAbsoluteUrl;
            jQuery.ajax({
                       url: siteurl + "/_api/web/lists/getbytitle('SampleData')/items",
                       method: "GET",
                       headers: { "Accept": "application/json; odata=verbose" },
                       success: function (data) {
                            if (data.d.results.length > 0 ) {
                                 //This section can be used to iterate through data and show it on screen
                                 alert('Hello');
                            }       
                      },
                      error: function (data) {
                          alert("Error: "+ data);
                     }
              });
        });
    });

    //-----------------------------------------------------------------------------
    // Output Functions
    //
    // Function Name            = WriteView
    // Function Purpose         = Display incremental message to dashboard

    function WriteView(logExecution) {
        var tempView = document.getElementById("viewpane");
        if (typeof tempView != 'undefined') {
            tempView.innerHTML = logExecution + "</br>" + tempView.innerHTML;
        } else {
            tempView.innerHTML = logExecution;
        }
    }

</script>

Answer 1

Try this bit out. The change is in $ and jQuery. Check out the way it is supposed to be used here (2nd Code block)

Also, good to check if you reallly need $.noConflict() If $ is not being used elsewhere then it probably is a good idea to remove this.

$.noConflict(); //This was captured through breakpoints, which probably executed, but it did not get into $(document).ready(); for sure

jQuery(document).ready(function(){
// Code that uses jQuery's $ can follow here.
    $("#btn1").click(function(){
        alert('Hi girl!'); // Hi girl never displayed

        var siteurl = _spPageContextInfo.webAbsoluteUrl;
        $.ajax({
                   url: siteurl + "/_api/web/lists/getbytitle('SampleData')/items",
                   method: "GET",
                   headers: { "Accept": "application/json; odata=verbose" },
                   success: function (data) {
                        if (data.d.results.length > 0 ) {
                             //This section can be used to iterate through data and show it on screen
                             alert('Hello');
                        }       
                  },
                  error: function (data) {
                      alert("Error: "+ data);
                 }
          });
    });
});