The following alert will not be visible: alert("I have entered the change function");

  • I am currently learning how to use jquery and I am experimenting with the change method
  • However, I am facing an issue where the alert message "I am inside change" is not being displayed
  • Could you please provide assistance on how to resolve this?
  • Below is the code snippet that I am working with

http://jsfiddle.net/b8yx6f16/

 $('#checkIDGrid').change(function() {
     alert("I am inside change");
    if(this.checked) {
        var returnVal = confirm("Are you sure?");
        $(this).prop("checked", returnVal);
    }
   // $('#textbox1').val(this.checked);        
});
javascriptjqueryhtmlcssangular

Answer №1

Give this a try: 

   $(document).on('change', '#checkIDGrid', function() {
         alert("I am inside change");
        if(this.checked) {
            var returnVal = confirm("Are you sure?");
            $(this).prop("checked", returnVal);
        }
       // $('#textbox1').val(this.checked);        
    });

http://jsfiddle.net/wj1z3dnp/

Answer №2

The reason for this is that #checkIDGrid is not present on the page until the grid loads, but the change event listener is applied right away. To solve this issue, you can use delegate binding like so:

$(document).on('change', '#checkIDGrid', function() {

With a delegate binding, the listener is attached to a parent element and will still work even if the child element is added to the DOM after the listener is set up.

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

When using Vue.js, styling SVGs with CSS proves difficult as it applies inline styles in the DOM rather than using class names

Recently, I tried to update the appearance of some SVG images using CSS, but to my surprise, nothing changed. Upon inspecting the page, I noticed that the styles were located under the 'element.style' tag, which may explain why my attempts were u ...

javascriptvue.jssvg

Tips for utilizing JavaScript to upload a file in Webform and make it accessible in the global PHP variable $_FILES

I'm feeling a little overwhelmed and frustrated. I've come across a bunch of solutions, but none of them seem to work fully or correctly!? My task is to create an HTML form that allows users to upload one or more files to the web server using AJ ...

javascriptphpajaxfileupload

What is the process for retrieving and utilizing the length of a value in an associative array?

I am currently attempting to retrieve the length of a value in an associated array as shown below. Ultimately, I am aiming to modify styles for each individual value. Does anyone have a solution for this issue? const shopLists = [ { genre: 'aaa&a ...

javascriptreactjsreact-native

"Vue3 offers the ability to return a multi-layer object through the Provide-Inject

While implementing provide-inject in my personal project, I encountered an issue where the value returned by inject() was a RefImpl Object. This meant that I had to access the actual value using inject().value.value instead of just inject().value. Here is ...

javascriptvuejs3

Taking advantage of Input decorator to access several properties in Angular 2

I am currently working on a component that is designed to receive two inputs through its selector. However, I would like to make it flexible enough to accept any number of inputs from various components. Initially, I tried using a single @Input() decorator ...

angulartypescriptangular-componentsangular-decorator

Having trouble moving to a different component in Angular?

In my application, I am facing an issue with navigating from List to Details component by passing the ID parameter. It seems that there is no response or error when attempting to call the relevant method. Below, you can find the code snippets related to th ...

javascriptangulartypescriptroutes

Effective ways to enable users to upload files in a React Native app

Being in the process of developing a react native app, I am faced with the challenge of allowing users to easily upload files from their mobile devices (pdf, doc, etc). Unfortunately, my search for a suitable native component has proven fruitless. Can anyo ...

cssjavascriptreact-native

What's the best way to alter an HTTP request response and conveniently retrieve it before sending it back from an Observable?

I am in the process of upgrading to Angular version 5. Previously, I was using @angular/http, but now I need to switch to @angular/common/http and utilize HttpClient. My current setup involves making HTTP requests in services, which makes them easy to reu ...

angularrxjs

The issue with JQuery AJAX not functioning properly in selecting options

I need help with a page that contains an autocomplete feature. I've tried the code below and it works well, but the select function is not firing and the alert is not showing up. Can someone assist me in resolving this issue? $('#w-input-search& ...

jqueryajax

How can you establish the default value for a form from an Observable?

Check out my TypeScript component below export interface Product{ id?:string, name:string, price:string; quantity:string; tags:Tags[]; description:string; files: File[]; } product$:Observable<Product | undefined>; ngOnIn ...

angulartypescriptobservableangular-reactive-forms

Designate a Cookie for individual users

Currently, I am in the process of building a straightforward Wordpress website that aims to monitor a user's order using a specific Cookie. Although most of the functionalities are already implemented, an unexpected issue has surfaced. Upon logging i ...

javascriptjquerywordpresscookies

Find all objects in an array of objects that contain at least one value that matches a given string

I am currently integrating search functionality in my application. The UI search results are generated from an array of objects. My goal is to loop through the name, custNumber, and sneak values in each object and display only the ones that contain a subst ...

javascriptarrayssortingvue.jsfiltering

Learn how to showcase video information in a vue.js template

I am having difficulty displaying a saved media (video) file on another page after collecting it using the ckeditor5 media option. The data is stored along with HTML tags generated by ckeditor, so I'm using v-html to display other content like <p&g ...

javascripthtmlvue.jsckeditor

The fetch() POST request is met with an error message stating "415 Unsupported Media Type"

I keep encountering a 415 error when attempting to upload a PDF file using fetch(). The PDF file resides in the same directory as the js file, and the name is correct. async function uploadFile(filePath, extension, timestamp) { const url = "https ...

javascriptnode.jsfetch-apihubspot-api

JS has the ability to determine the media style of a DOM element

I am trying to retrieve the CSS display property of a DOM element. Normally, I would use something like document.getElementById('hello-world').style.display. However, when the style is set using a CSS @media Rule, I do not see any change in this ...

javascripthtmlcssmedia-queries

Unleash the Power of Animating Your Active Tabs

Is there a way to create animated tabs that slide in when clicked? I've experimented with using transition code but haven't quite achieved the desired effect yet. This is what I currently have: [data-tab-info] { display: non ...

javascripthtmlcss

What is the best way to merge different sets of CSS media queries?

In CSS Media queries, you have the option to use , (for "or") and and to meet media query criteria. For instance: @media (min-width: 768px) and (min-resolution: 2dppx) { ... } But what if you wish to combine and and , within the same media query? An exam ...

cssmedia-queriesretina-displaydevicepixelratio

Using asynchronous functions in a loop in Node.js

Although this question may have been asked before, I am struggling to understand how things work and that is why I am starting a new thread. con.query(sql,[req.params.quizId],(err,rows,fields)=>{ //rows contains questions if(err) throw err; ...

javascriptnode.jsangulartypescript

Personalize a bootstrap theme specifically for the mobile interface

My current template, based on Bootstrap, displays a text along with a button and an image. Using a checkbox, you can choose whether the image appears to the right or left of the text. One issue I'm facing is that in the mobile view, the text and butt ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

We are creating a table in JavaScript and mistakenly adding an unnecessary tbody

I am currently utilizing a combination of plain JavaScript and Jquery in order to dynamically generate a table. The issue arises when I attempt to use a for loop to iterate through the data obtained from an Ajax request, as it fails to create new rows. To ...

javascripthtmldom