Utilize CSS with dynamically created elements

I am currently figuring out how to use my .each() function with a $(document).ready and a click event. Here's what I have so far:

$(document).ready(function(){
  $(".help-inline").each(function() {
    $(this).css('display', 'none');
  });
});

When working within a form using nested_form, I can clone a field by clicking '.example_button' and would like the newly created element in my DOM to also have the display:none rule applied.

I attempted the following code, but it only applies the rule when I click on '.examnple_button':

$(document).on('click', '.example_button', function(){
   $(".help-inline").each(function() {
     $(this).css('display', 'none');
   });
});

How can I ensure that the css rules are applied under both circumstances?

Thank you

javascriptjquerycss

Answer №1

Here is a suggestion you can try:

$(document).on('focus', '.example_button', function(){
   $(".help-inline").css('display', 'none'); //or $(".help-inline").hide();
});

The use of .each() to iterate through '.help-inline' elements is unnecessary, as jQuery will automatically iterate through all elements with the class help-inline in the DOM.

Alternatively

Based on my understanding of your question, if you are cloning a field by clicking '.example_button', one approach is to hide the element when creating it. Alternatively, if there is a specific event triggering the need to hide '.help-inline' elements, utilize that event with .on() and hide elements with the class 'help-inline' within the DOM.

Answer №2

To enhance readability and efficiency, create a separate function for the commonly used code and invoke it in both scenarios.

function hideAllInlineHelps() {
    $('.help-inline').hide(); // or .css('display', 'none')
}

$(document).ready(function() {
    hideAllInlineHelps();
});

$(document).on('click', '.example_button', function() {
    hideAllInlineHelps();
});

Update

Credit to @Kartikeya for noting that the function should run without requiring button click.

After reviewing the documentation for "nested_form" here, it appears you can respond to the nested:fieldAdded event:

$(document).on('nested:fieldAdded', function(evt) {
    hideAllInlineHelps();
    // or $('.help-inline').hide();
});

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

Continuously querying the database in JSP to automatically fetch data

I've been exploring Spring recently and I'm curious if there is a way to set up automatic database polling using Spring 4. Ideally, I'd like the code to run without requiring the user to manually refresh any pages. Is it possible for my jsp ...

javajquerymysqlajaxjsp

open a new window with a reference based on the name

In order to obtain a reference to the currently open window, I utilize the following code: var refWindow = window.open("mypage1", "name_mypage"); If I wish to close the window, I simply use this command: refWindow.close(); When I refresh the screen (by ...

javascript

The footer should remain at the bottom of the page without being permanently fixed

Is there a way to keep the bootstrap footer at the bottom without fixing it in place? In the code example below, the footer should always appear at the bottom. The white space after the footer should come before it. Using sticky-bottom achieves this, but ...

javascriptcsstwitter-bootstrapbootstrap-4footer

Updating the iFrame source using jQuery depending on the selection from a dropdown menu

I want to create a dynamic photosphere display within a div, where the source is determined by a selection from a drop-down menu. The select menu will provide options for different rooms that the user can view, and the div will contain an iframe to showca ...

javascriptjqueryhtmlcssiframe

When navigating back to the Homepage from another page, React displays the Homepage

Recently, I started learning React and following the Traversy crash course along with an additional video on React router 6+. My route setup looks like this: import { BrowserRouter as Router, Route, Routes } from 'react-router-dom' return ( &l ...

javascriptreactjsreact-routerreact-router-dom

Tips for executing a jQuery nested template in a recursive manner

Imagine a world where JSON objects and jQuery templating collide in a thought-provoking inception-like scenario. How can we dive deeper into this rabbit hole? The catch is, I'm a bit lazy and hoping the code will do most of the heavy lifting... Q:& ...

javascriptjqueryhtmlrecursionjquery-templates

Facing issues with React JS and Material UI? If you're encountering problems where 'this.props' is

After running the code provided below, I anticipated that the styles would be injected within props. However, I consistently encounter undefined props. No props are being supplied to this component. const customStyles = theme => ({ root: { & ...

javascriptreactjsmaterial-ui

Using Angular to create a dynamic form with looping inputs that reactively responds to user

I need to implement reactive form validation for a form that has dynamic inputs created through looping data: This is what my form builder setup would be like : constructor(private formBuilder: FormBuilder) { this.userForm = this.formBuilder.group({ ...

javascriptangulartypescriptangular-reactive-formsangular-forms

Contrasting the Next 12 client-side routing with the Next 13 server-centric routing

According to the Next 13 documentation, it explains how the new router in the app directory utilizes server-centric routing to align with Server Components and data fetching on the server. Unlike the traditional pages directory that employs client-side r ...

javascriptreactjsnext.jsnext.js13

What is the best method for converting IDs into objects within ng-options in Angular?

Is there a way to dynamically use an array of IDs as the source of my ng-option directive inside of select? Instead of creating an array of objects with corresponding IDs, I am wondering if there is a method to set a function as the source of ng-option. ...

javascriptangularjsangular-directiveng-optionsangularjs-select

Best practice for pausing a setInterval during a beforeSend function in an AJAX call

Here is some code I am working with: var centerTimer = 0; function startCenterRefresh(refreshTime, position, params) { centerTimer = setInterval(function() { jQuery.ajax({ type: "POST", url: host + "/forms/refresh-cente ...

jqueryajaxsetinterval

Contrasting Template Helper and Template Variable in Meteor.js

What sets apart the use of a Template Helper from a Template Variable (if that's not the right term)? How do you determine when to utilize each one? In the following example, both Template.apple.price function and the quantity function in Template.ap ...

javascriptnode.jsmeteorhandlebars.js

Finding the Client's Private IP Address in React or Node.js: A Comprehensive Guide

Issue I am currently facing the challenge of comparing the user's private IP with the certificate's IP. Is there a method available to retrieve the user's private IP in react or node? Attempted Solution After attempting to find the user&a ...

javascriptnode.jsreactjsip

The TSX file is encountering difficulty rendering an imported React Component

Upon attempting to import the Day component into the Week component (both .tsx files), an error is thrown: Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. ...

javascriptreactjstypescriptjsx

What is the purpose of assigning controller variables to "this" in AngularJS?

Currently, I am analyzing an example in CodeSchool's "Staying Sharp with Angular" course in section 1.5. Here is the code snippet: angular.module('NoteWrangler') .controller('NotesIndexController', function($http) { var contro ...

javascriptangularjsthis

IE8 and IE9 encountering "Access is denied" error due to XML causing XDomainRequest (CORS) issue

Sorry if this seems repetitive, but I am unable to find a definitive answer to similar questions. Whenever I attempt to make a CORS request for XML, I consistently encounter an "Access is denied" JavaScript error in IE8. The code I am using is based on t ...

javascriptajaxinternet-explorer-8xmlhttprequestcross-domain

How to clear a 24-hour-old template from the Angular 1 cache?

I have implemented the following rule to clear template cache in my AngularJS application: myApp.run(function ($rootScope, $templateCache) { $rootScope.$on('$viewContentLoaded', function() { $templateCache.removeAll(); }); }); Howe ...

javascriptangularjscachingangular-template

Could somebody provide clarification on the functions being called in the Angular Test Code, specifically evaluate() and dragAndDrop()?

Exploring the drag and drop functionality of an angular-Gridster application using Protractor with a test code. I have some questions about the functions being used in the code snippet below. Can someone clarify the purpose of evaluate() - the API definit ...

javascriptangularjsprotractorgridster

Tips for sending form data via ajax to a python script?

I'm running into an issue with a python program and an ajax request. I am attempting to retrieve data from my Javascript in the python program, but the usual method of using .getfirst(field name) isn't working, which I believe is due to the reque ...

javascriptpythonajax

Keycloak does not support using the updateToken() function within an asynchronous function

In our development of a Spring application with React/Redux frontend, we faced an issue with Keycloak authentication service. The problem arose when the access token expired and caused unexpected behavior in our restMiddleware setup. Here is a simplified v ...

javascriptreactjsjbosskeycloak