Issue with $ .bind method in the module pattern

Trying to implement the javascript module pattern for the first time and having trouble with this code. The $.bind function is not throwing any errors and dropBox is not NULL, so I'm a bit puzzled. Am I missing something here?

 var Application = (function(d, w, $) {

    var drop, dragStart, dragEnter, dragOver, dragLeave;

    drop = function(e) {
    };

    dragStart = function(e) {
    };

    dragEnter = function(e) {
    };

    dragOver = function(e) { 
    };

    dragLeave = function(e) {  
    };

    return {

        init: function() {

            var dropBox = $('#someid');
            dropBox.bind('dragstart', dragStart);
            dropBox.bind('dragenter', dragEnter);
            dropBox.bind('dragover', dragOver);
            dropBox.bind('drop', drop);
            dropBox.bind('dragleave', dragLeave);
        }
    };

})(document, window, window.jQuery);

Answer №1

When you use (function(...) {})(...);, you are simply invoking the declared function which returns an object with an init() method. Unless you actually call the init() method, nothing will happen.

To ensure that everything runs smoothly, make sure to call Application.init() within the document ready event:

$(function() {
    Application.init();
});

If you try to call it too early, you may find that $('#someid') is empty.

Other than that, there doesn't seem to be any issues with the code provided in your question. You can also check out this jsFiddle example for reference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to remove a selected item from an array in Vuejs when it has been clicked

I'm having trouble with my splice() method in this simple To-Do app. I want to delete a specific task by clicking a button, but the solutions I've tried from Stack Overflow aren't working for me. The items do get deleted, but only the last o ...

Ways to retrieve dictionary keys as an array in Angular

Here is an example of an Angular dictionary: { ARRAY1: [{...}, {...}, {...}] ARRAY2: [{...}, {...}, {...}] ARRAY3: [{...}, {...}] ARRAY4: [{...}] } I want to show all the keys of arrays from this dictionary on an HTML page. I attempted to do ...

retrieve undefined value from redux state in a React Native application

Received the data in reducer but encountering issues accessing it in the component. Below is the connection code: const mapStateToProps =state => { return { name:state.fbLogin.name } } function mapDispatchToProps(dispatch){ ...

The combination of Firebase and AngularJS with limitToFirst(1) fails to return a specific child element

Currently, I'm working with AngularJS and Firebase and facing an issue when trying to retrieve the first child from a filtered set of children. Interestingly, using limitToFirst(1) doesn't seem to accomplish this, unlike the .child("=KDhddgd47nd" ...

Create circles with a variety of different colors on the canvas

I need assistance with creating an animation where circles move from right to left on a canvas. The colors of the circles are randomly selected using a function. Currently, I have a fiddle where a single circle moves from right to left, changing color ever ...

encountering difficulties with installing dependencies using yarn or npm

After cloning a repository, I attempted to install the dependencies using npm install or yarn but encountered the following errors: For Yarn: https://gyazo.com/2fdf52c4956df2e565cc0b1cedf24628 For npm install: https://gyazo.com/a1d197e9ead89dbe4a7d3c5b8f ...

How can jQuery be referenced?

Is there a way to adjust the jQuery code that targets the elements above within the HTML? The HTML code looks like this: <div class="dramer"> <ul> <li> </li> <li> <a class="shares" href="#"> Click & ...

Tips for triggering the .click() function upon returning to index.html after visiting a different page

I'm in the process of creating a portfolio website where the index.html page features a sliding navigation bar that displays a collection of projects. Each project is linked to a separate work.html page. I would like the sliding nav to automatically o ...

Adjust the number of columns based on the minimum screen resolution using columnizer

Currently, I am utilizing the columnizer jQuery plugin to divide my content into columns on a responsive website with a fluid width container. I have implemented different JavaScript functions based on the minimum screen resolutions, similar to CSS media q ...

Validate if the token has expired by utilizing this JWT library

My token configuration looks like this: jwt.sign( { user: pick(user, ['_id', 'username']) }, secret, { expiresIn: '2m' } ); However, when attempting to verify if the token has expired, the following code isn ...

Struggle with registering fonts in Canvas using JavaScript

I've been struggling to add a custom font to my canvas for hosting the bot. Even though I'm not encountering any errors, the font fails to display on the host. Below is the code snippet: const { AttachmentBuilder } = require('discord.js&apos ...

Can we display the chosen form values before submitting?

Want to implement a confirmation message for users before submitting their form using onClick="return confirm('are you sure ?')". The basic form structure is as follows: <form> <Select name='val[]' class='select'> ...

Password validation with Mongoose customization

I'm working on creating a Schema using mongoose, but I'm facing some challenges when it comes to implementing custom validation for the password. The password should meet the following criteria: It must contain at least one special character ...

Navigate through two distinct elements by categorizing them based on their types

After completing the frontend design, I moved on to integrating the backend and encountered an issue. If anyone can offer assistance or even a hint, it would be greatly appreciated. Visit the demo website for more insight. Initially, I hard coded the comp ...

Hovering over a dropdown in jQuery triggers specific behavior

Struggling with getting this dropdown to function properly. The goal is for the dropdown to stay open when hovering over the element that triggered it. I created a function that checks every half-second if the mouse is still hovering over the element. If i ...

Utilizing AJAX and jQuery to Cast Your Vote in a Poll

I have recently set up a basic poll using AJAX JSON jQuery to interact with the server side, but it seems to be malfunctioning. I would appreciate any guidance on where I may have made a mistake. I am still learning jQuery and JSON. JavaScript <script ...

When making use of useEffect along with unsubscribe, a warning regarding the missing return type on the function is triggered

I've implemented the following useEffect hook where I set a listener and then unsubscribe from it within a return statement. useEffect(() => { const listener = firebase.auth.onAuthStateChanged(authUser => { }) re ...

An error occurred as the Serverless Function timed out while attempting to load a dynamic route in Next.js version 13

I have a basic Next.js application with the following route structure: /contentA/ - Static - Initial load: 103 kB /contentA/[paramA]/groups - SSG - Initial load: 120 kB /contentB/[paramA]/[paramB]/[paramC] - SSR (client component) - Initial load: 103 kB ...

Managing memory in Three.js

I am facing an issue with managing memory in my large scene that consists of Mesh and MorphAnimMesh objects. I have tried to free up memory by removing these meshes, but it seems like the memory usage remains unchanged. for ( var i = scene.children.length ...

Best practices for organizing an array of objects in JavaScript

I have an array of objects with nested arrays inside, and I need to restructure it according to my API requirements. [{ containerId: 'c12', containerNumber: '4321dkjkfdj', goods: [{ w ...