Jquery CSS not working on div from Post

Question

I have a page that gets a div using jquery's post method. I then try to apply css to the divs and it doesn't work. when i use jquery to apply css on divs that are already on the page, it works for them.

Jquery:

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

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

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

$('.quest').css( "border", "13px solid red" );  //this doesn't work

});

Echoed out from getquestions.php (this is working correctly):

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

use $('#questionArea').find('.quest').css( "border", "13px solid red" ); — Tamil Selvan C
– Tamil Selvan C, Commented Mar 30, 2015 at 2:59
this seems to be already an issue that was answered. Did you try moving the CSS definitions to the css file as suggested in stackoverflow.com/questions/16751124/… — Bala
– Bala, Commented Mar 30, 2015 at 3:02
@Bala what do you mean by move it to the css file? i checked that link but i still dont understand — user176105
– user176105, Commented Apr 2, 2015 at 22:25
i meant to move the style definitions to a CSS file instead of placing it in the html file in a <style> tag. once in a CSS file add it to the page via <link> tag. Hope that helps. — Bala
– Bala, Commented Apr 3, 2015 at 2:32

JK ABC · Accepted Answer · 2015-03-30 03:24:03Z

1

it's because your div with class quest is not available when you execute the jquery's css function. Since $.post is an async function, the div is only added to the DOM by $('#questionArea').html(result); when $.post's callback is executed, so you should do the css call there.

should be like this:

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

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

        $('#questionArea').html(result);
        // the div is just added
        $('.quest').css( "border", "13px solid red" );
    });
    // the div is not added to DOM yet since $.post has not finished fetching the result

});

answered Mar 30, 2015 at 3:24

JK ABC

5765 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tamil Selvan C · Accepted Answer · 2015-03-30 03:07:05Z

0

Try with $(document).find('.quest')

edited Mar 30, 2015 at 3:07

Tamil Selvan C

20.3k12 gold badges55 silver badges72 bronze badges

answered Mar 30, 2015 at 3:04

fdglefevre

6924 silver badges15 bronze badges

Comments

akshay · Accepted Answer · 2015-03-31 02:27:15Z

0

How about trying to add the css in .done() after post request? Like

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

    alert( "success" );

})

.done(function() {

    alert( "second success" );

});

Or

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

// Put the results in a div

posting.done(function( data ) {

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

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

});

Source : jQuery.post

answered Mar 31, 2015 at 2:27

akshay

5124 silver badges14 bronze badges

Collectives™ on Stack Overflow

Jquery CSS not working on div from Post

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related