Change css of first div after live click

I want to be able to change the开发者_如何学Go css of a div after I have clicked span.submit-comment.

How would I go about to change the css of that div.

I tried putting the following in the success part of the script:

$('div.news-comment:first').css("background-color", "#000");

But the div just flashes black (as I click) because it's inside the click function. I want the css to persist untill I refresh the page.

Any ideas?

// post news comment
    $('span.submit-comment').live('click', function() {
        var commentname = $('input#commentname').val();
        var commentcontent = $('textarea#commentcontent').val();
        var newsid = $('span.view-comments').attr('id');
        var datastring = 'commentname=' + commentname + '&commentcontent=' + commentcontent + '&newsid=' + newsid;

        $.ajax({
        type: "POST",
        url: "ajax/post_news_comment.php",
        data: datastring,
        success: function(){
                    $('div#news-comments').load('ajax/get_news_comments.php?news_id=' + newsid);
                 }
        });
    });

If the comment you are changing the background on is in the #news-comments div you are replacing it with the loaded html from get_news_comments.php in your .ajax callback. No matter where you put your js the element will be replaced.

If so, adding it in a callback for the load in your success function should be ok.

Your css script is ok, but just place it after load function.

Just add a return false at the end of the function for the button click, or pass in the value e and put e.preventDefault(); at the begining or end of the function.

e.g.

$('span.submit-comment').live('click', function(e) {
    e.preventDefault();
    // your other code.
    return false;
});