Jquery CSS malfunctioning on Post's div element

After retrieving a div using jquery's post method on my page, I am encountering an issue when attempting to apply CSS to the divs. Strangely enough, applying CSS with jquery to divs that are already present on the page works perfectly fine.

Javascript code:

$('#next').click(function() {

    $.post('getquestions.php', {number: number}, function(result){

        $('#questionArea').html(result);
    });

$('.quest').css( "border", "13px solid red" );  //this line does not execute as expected

});

The following is what gets echoed out from getquestions.php (which is functioning correctly):

echo "<div id='question" . $question_number . "' class='quest'>";

Answer №1

The reason why the CSS is not applying to your div with class quest is because the div is not available in the DOM at the time when you are executing the jQuery css function. This is due to the asynchronous nature of the $.post function, which only adds the div to the DOM after its callback function, triggered by $('#questionArea').html(result);, is executed.

To ensure that the CSS is applied correctly, you should move the

$('.quest').css( "border", "13px solid red" );
call inside the $.post's callback function:

$('#next').click(function() {

    $.post('getquestions.php', {number: number}, function(result){

        $('#questionArea').html(result);
        // The div has been added at this point
        $('.quest').css( "border", "13px solid red" );
        
    });
    // The div is not added to the DOM yet since the result has not been fetched from the server

});

Answer №2

Experiment by using $(document).find('.quest')

Answer №3

Have you considered adding the CSS within the .done() function following the post request? For example:

$.post( "example.php", function() {

    alert( "success" );

})

.done(function() {

    alert( "second success" );

});

Alternatively, you could try this approach:

var posting = $.post( url, { s: term } );

// Display results in a designated div

posting.done(function( data ) {

var content = $( data ).find( "#content" );

$( "#result" ).empty().append( content );

});

Source : jQuery.post

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 could be causing this addEventListener to fail when I am assigning elements to a class?

I've encountered an issue with my code where I have two text inputs and two date inputs. I tried to select all of them using QuerySelectorAll with a class, added a click listener that should change the textContent of a div element to "", but it's ...

Automatically choose radio buttons within an li element in a loop

Hey there, I'm new to SO and this is my first question. As a bit of a newbie, I found this jquery code snippet on another SO answer that I want to use. The function I'm aiming for is the same, but the markup structure in my HTML is different bec ...

Utilize jQuery to toggle the visibility of a div depending on the numerical quantity input

I would greatly appreciate any assistance with this request, please. Here is the input that I have: <input onchange="UpdateItemQuantity(this.value,1284349,0,10352185,2579246,'','AU'); return false;" type="number" class="form-contro ...

Selenium can be used to locate elements between two specific spans

I'm on a mission to locate specific text within this HTML code using Selenium <span class="value"> Receiver 1 <br> </span> Is there a way to make it more straightforward, like perhaps using span[class=value]? ...

Easily visualize the JSON object hierarchy within Eclipse using JavaScript

Is there a way to view the JSON parse objects structure in Eclipse without using console.log() in Chrome due to cross domain issues? I need assistance with how to view the [object Object] returned structure from Json.Parse. ...

execute a function when an image is clicked using jQuery

How can I create an onclick event for the variable imageCatuaba? function setCatuaba(map) { var imageCatuaba = { url: 'images/catuskov.1.png', origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(0, 32) }; I'm ...

Achieving a consistent fixed width for tbody even when scrollbar is present

thead{ width: calc(100% - 17px); display:block; } tbody{ display:block; overflow-y: auto; height:100px; } http://jsfiddle.net/mkgBx/ Is there a way to adjust the width of the tbody element to match that of the thead element plus the scrollbar? Currently ...

What is the proper usage of main.js and main.css within the skeleton portlet project that is created by the Liferay 6.0.6 plugin SDK?

Is it a good practice to include portlet-specific JS or CSS in them only if <portlet:namespace /> works within them? Should I rely on unique function/variable names or class names instead? ...

Conceal and reveal text with a simple user click

Currently, I am working on a website project that utilizes bootstrap. However, I am facing some uncertainty regarding how to effectively hide and display text: <nav class="navbar navbar-light" style="background-color: #e3f2fd;"> ...

Distinction between style and styleClass on a JSF webpage

I recently began navigating a java code base that utilizes the style and styleClass keywords to customize elements within the jsf page. This particular project is built on jsf 2.2. The 'style' keyword is used for applying html attributes like: ...

Is there a way to eliminate the # sign from hash data using jQuery?

Can anyone help me retrieve the hash value from the URL? var hash = window.location.hash; I am looking for a way to remove the "#" sign from the hash. Any suggestions? ...

Unable to load JavaScript file twice dynamically in Internet Explorer

I recently created this page where users can click on rows in a table to load data via an ajax request and dynamically generate a graph. While this functionality works smoothly in Chrome and Firefox, I'm experiencing issues with Internet Explorer 8. S ...

What was the reason behind resolving the 0 height body problem by adjusting the WebView Layout Parameter?

My Xamarin WebView was not displaying my HTML correctly. Even though it was set to fill the whole screen, the body height in the HTML remained at 0px. In addition, I had a div in the HTML with the following style: position:absolute; top:0px; bottom:0px; ...

Developing a unified input element containing numerous fields

After @grateful answered this question, I wanted to elaborate in case it could benefit others... In my project, there's a page called rsetup.php which has some PHP code to access a MySQL database for filling the HTML content of the page. This HTML ge ...

Creating a multipart/form-data request using JavaScript/jQuery

After much searching and experimentation, I have been trying to understand the process of constructing a request to be sent using something similar to $.ajax({ contentType: "multipart/form-data", type: "POST", data: ...

Animate the sliding of a div from the right side to the left side with the animate

I am interested in implementing an animation effect where a div with the class '.whole' slides from right to left. This can be achieved using jQuery: $('#menu').click(function() { $('.whole').toggleClass('r2' ...

Exploring the art of div transitions and animations using React and Tailwind CSS

I successfully implemented the sidebar to appear upon clicking the hamburger icon with a transition. However, I am now facing the challenge of triggering the transition when the close button is clicked instead. I have attempted using conditional operations ...

Dynamically load content onto a jQuery Mobile page upon clicking a link

I'm relatively new to working with jQuery Mobile and making AJAX requests. Let me try to explain my issue clearly. Currently, I am developing a mobile project and utilizing the jQuery Mobile auto-complete list, populating it with data from an XML fil ...

How to perfectly center the Bootstrap Modal using CSS styling

Looking for a way to vertically align the Bootstrap Modal? I've attempted using CSS with no success. I tried this: .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } However, the modal still displays in t ...

What steps should I take to ensure that flex aligns the inner-divs on the same row?

I have observed that flex can easily align input tags, regular text, and other elements perfectly on a single line with the flex-direction:row; property. However, this alignment seems to get disrupted when one of the elements is a div. For example: <ht ...