Jquery Not Working Windows Universal App

Question

This is not a duplicate as this has nothing to do with referenced link as this is a windows based application, and has nothing to do with the location of the script as this is not related to a web based app. Please remove duplication.

Maybe I am just putting the code in the wrong location as this is my first time attempting to get started in creating Universal Apps for windows using JS. As per windows developer site Jquery can be used. https://blogs.windows.com/buildingapps/2013/07/10/jquery-and-winjs-working-together-in-windows-store-apps/#IYuzrU7FW7kC0fig.97

so to just test it out I did a standard simple default new project. With some jquery test code.

My Test Jquery Code:

$(".bodytype").on("click", function () {
    console.log('Clicked');
    $(".bodytype").css("background", "blue");
});

html code in index.html

  <div class="bodytype">A Row</div>

The main.js file in the windows app looks like this:

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var isFirstActivation = true;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.voiceCommand) {
            // TODO: Handle relevant ActivationKinds. For example, if your app can be started by voice commands,
            // this is a good place to decide whether to populate an input field or choose a different initial view.
        }
        else if (args.detail.kind === activation.ActivationKind.launch) {
            // A Launch activation happens when the user launches your app via the tile
            // or invokes a toast notification by clicking or tapping on the body.
            if (args.detail.arguments) {
                // TODO: If the app supports toasts, use this value from the toast payload to determine where in the app
                // to take the user in response to them invoking a toast notification.
            }
            else if (args.detail.previousExecutionState === activation.ApplicationExecutionState.terminated) {
                // TODO: This application had been suspended and was then terminated to reclaim memory.
                // To create a smooth user experience, restore application state here so that it looks like the app never stopped running.
                // Note: You may want to record the time when the app was last suspended and only restore state if they've returned after a short period.
            }
        }

        if (!args.detail.prelaunchActivated) {
            // TODO: If prelaunchActivated were true, it would mean the app was prelaunched in the background as an optimization.
            // In that case it would be suspended shortly thereafter.
            // Any long-running operations (like expensive network or disk I/O) or changes to user state which occur at launch
            // should be done here (to avoid doing them in the prelaunch case).
            // Alternatively, this work can be done in a resume or visibilitychanged handler.
        }

        if (isFirstActivation) {
            // TODO: The app was activated and had not been running. Do general startup initialization here.
            document.addEventListener("visibilitychange", onVisibilityChanged);
            args.setPromise(WinJS.UI.processAll());
        }

        isFirstActivation = false;
    };

    function onVisibilityChanged(args) {
        if (!document.hidden) {
            // TODO: The app just became visible. This may be a good time to refresh the view.
        }
    }

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state that needs to persist across suspensions here.
        // You might use the WinJS.Application.sessionState object, which is automatically saved and restored across suspension.
        // If you need to complete an asynchronous operation before your application is suspended, call args.setPromise().
    };
    //Code Here

    $(".bodytype").on("click", function () {
        console.log('Clicked');
        $(".bodytype").css("background", "blue");
    });

    //App Start Code Before
    app.start();

})();

index.html full code here:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>App3</title>
    <link href="lib/winjs-4.0.1/css/ui-light.css" rel="stylesheet" />
    <script src="lib/winjs-4.0.1/js/base.js"></script>
    <script src="lib/winjs-4.0.1/js/ui.js"></script>
    <link href="css/default.css" rel="stylesheet" />
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/main.js"></script>
</head>
<body class="win-type-body">
    <div class="bodytype">A Row</div>
</body>
</html>

can someone help me understand what I am doing wrong? There are no compile errors and the app loads fine, but when I attempt to click the row the background color does not change.

Answer 1

Make sure you already attached your Jquery file in your html page

Goto your main.js and write this

window.onload = function () {

  $(".bodytype").on("click", function () {
    console.log('Clicked');
    $(".bodytype").css("background", "blue");
});

}
`

Worked for me , Fam it will for you too.