Replicate and $(document).ready()

Question

Replicate and $(document).ready()

My form has required fields that need to be completed. To alert users about blank fields, I have implemented the following code:

$(document).ready(function() {
    $('input.required:text').focus(function() {
        $(this).css({'background-color': '#FFF'});
    });
    $('input.required:text').blur(function() {
        if ($(this).val() == '') {
            $(this).css({'background-color': 'rgba(222, 41, 30, 1)'});
        }
    });
})

The issue arises when I use an "add" button to duplicate a hidden form using this function:

function addlocation() {
    var clone = $('div.location-info-new').clone();
    clone.addClass('location-info');
    clone.find('form').addClass('ready');
    clone.removeClass('location-info-new');
    clone.appendTo('div.locations');
    clone.find('input.required:text').focus(function() {
        $(this).css({'background-color': '#FFF'});
    });
    clone.find('input.required').each(function (i, v) {
        $(this).css({'background-color': 'rgba(222, 41, 30, 1)'});
    });
}

To address this issue, I included background-color changes in the cloned form as they were not working initially. However, there is still a problem. The new form's fields correctly display in red initially and change to white upon focus. But, if a user focuses on an input box, leaves it empty, and removes focus, the input box does not revert back to red. This behavior is different from the original form where it works properly.

I am puzzled as to why the background-color changes from document.ready are not being applied to my cloned form. Can anyone shed light on this issue?

javascript jquery css

Answer 1

Answer №1

As new elements are dynamically added after subscribing to existing ones, you can utilize the jQuery on function to subscribe to both the initial form elements and any future ones.

$(document).ready(function() {
    $(document).on('focus', 'input.required:text', function() {
        $(this).css({'background-color': '#FFF'});
    });
    $(document).on('blur','input.required:text', (function() {
        if ($(this).val() == '') {
            $(this).css({'background-color': 'rgba(222, 41, 30, 1)'});
        }
    });
})

Answer 2

As new elements are dynamically added after subscribing to existing ones, you can utilize the jQuery on function to subscribe to both the initial form elements and any future ones.

$(document).ready(function() {
    $(document).on('focus', 'input.required:text', function() {
        $(this).css({'background-color': '#FFF'});
    });
    $(document).on('blur','input.required:text', (function() {
        if ($(this).val() == '') {
            $(this).css({'background-color': 'rgba(222, 41, 30, 1)'});
        }
    });
})

Answer 3

Answer №2

How come the background-color changes I applied during document.ready aren't showing up on my cloned form?

The reason is that the newly cloned elements do not have the event handler attached to them. You have bound the focus event handler like this:

clone.find('input.required:text').focus(function() {
    $(this).css({'background-color': '#FFF'});
});

However, you have not bound the blur event handler. There are a few ways to address this issue:

Manually attach the blur event handler

Simply add

clone.find('input.required:text').blur(function() {
    if ($(this).val() == '') {
        $(this).css({'background-color': 'rgba(222, 41, 30, 1)'});
    }
});

to your function.

Use .clone correctly

Upon reviewing the documentation, you'll find that .clone accepts a boolean argument that allows for copying data and event handlers. So, you can use

var clone = $('div.location-info-new').clone(true);

instead and eliminate

clone.find('input.required:text').focus(function() { ... });

Utilize event delegation

This concept is well explained in the jQuery tutorial: https://learn.jquery.com/events/event-delegation/

Answer 4

How come the background-color changes I applied during document.ready aren't showing up on my cloned form?

The reason is that the newly cloned elements do not have the event handler attached to them. You have bound the focus event handler like this:

clone.find('input.required:text').focus(function() {
    $(this).css({'background-color': '#FFF'});
});

However, you have not bound the blur event handler. There are a few ways to address this issue:

Manually attach the blur event handler

Simply add

clone.find('input.required:text').blur(function() {
    if ($(this).val() == '') {
        $(this).css({'background-color': 'rgba(222, 41, 30, 1)'});
    }
});

to your function.

Use .clone correctly

Upon reviewing the documentation, you'll find that .clone accepts a boolean argument that allows for copying data and event handlers. So, you can use

var clone = $('div.location-info-new').clone(true);

instead and eliminate

clone.find('input.required:text').focus(function() { ... });

Utilize event delegation

This concept is well explained in the jQuery tutorial: https://learn.jquery.com/events/event-delegation/

Answer 5

Answer №3

It is not possible to directly trigger the event on a programmatically added element.

Instead, you can use the on method to bind a function to your element.

Modify your code like this :

$(document).ready(function() {
    $('input.required:text').on("focus", function() {
        $(this).css({'background-color': '#FFF'});
    });
    $('input.required:text').on("blur", function() {
        if ($(this).val() == '') {
            $(this).css({'background-color': 'rgba(222, 41, 30, 1)'});
        }
    });
})

Answer 6

It is not possible to directly trigger the event on a programmatically added element.

Instead, you can use the on method to bind a function to your element.

Modify your code like this :

$(document).ready(function() {
    $('input.required:text').on("focus", function() {
        $(this).css({'background-color': '#FFF'});
    });
    $('input.required:text').on("blur", function() {
        if ($(this).val() == '') {
            $(this).css({'background-color': 'rgba(222, 41, 30, 1)'});
        }
    });
})

Replicate and $(document).ready()

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to display a scrollbar at the bottom of the table while setting the table height to

I'm looking for the specific jQuery/JavaScript function that will accomplish this task

Target specifically the onhover div element using JQuery and trigger the smooth sliding down effect with the SlideDown() function

Positioning a Three.js static CSS2DObject with respect to the camera's perspective

What is the best way to iterate through .next()?

Issue with border-color in CSS on Chrome tables

Guide on utilizing Vercel KV for storing and fetching posts from an API

Determining Field of View (FOV) for a perspective camera in ThreeJS following a browser window resize

Does Vuejs emit an event when a specific tab becomes active in boostrap-vue?

Ways to maximize the amount of content contained within a box

Having difficulties with Smooth Div Scroll and Colorbox integration

Issues arise when attempting to transfer strings through ajax to a Node.js server that is utilizing express.js

Tips on interpreting JSON objects and cross-referencing them with user input

Is there a way to resolve the execution order dependency of JS-CF using a server-side callback function?

What methods are available to incorporate arithmetic when defining a style attribute?

What is the best way to execute the .playVideo() function in Youtube using jQuery?

Delving into the intricacies of reactivity within datasets

How can we efficiently loop through all the icons in React Material-UI?

Tips for ensuring that Breadcrumbs are displayed properly with the noWrap feature

Chart rendering failure: unable to obtain context from the provided item