Can you use jQuery .css() with .live()?

I have a div with class="centerMessage" . This div is inserted into the DOM at a point after the page is loaded. I would like to change the CSS on this div to center it. I tried the CSS function below, but it did not work. Does anybody know a way to do this?

开发者_StackOverflow中文版

function centerPopup() {
var winWidth = $(window).width();
var winHeight = $(window).height();
var positionLeft = (winWidth/2) - (($('.centerMessage').width())/2);
var positionTop = (winHeight/2) - (($('.centerMessage').height())/2);
$('.centerMessage').live( function(){
$(this).css("position","absolute");
$(this).css("top",positionTop + "px");
$(this).css("left",positionLeft + "px");
});
}

---

If my assumption of what you're trying to achieve is correct, you don't need any Javascript to do this. It can be achieved by some simple CSS.

.centerMessage {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px; /* half of the height */
    margin-left: -300px; /* half of the width */
    width: 600px;
    height: 300px;
    background: #ccc;
}

Demo: http://jsbin.com/awuja4

---

.live() does not accept JUST a function. If you want something to happen with live, it needs an event as well, like click. If you want something to happen always for every .centerMessage, you will need the plugin .livequery()

---

I believe that the following works in FF & Webkit.

div.centerMessage{
    position: absolute;
    width: /* width */;
    height: /* height */;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
}

---

I know this is already answered, but I thought I'd provide a working jsFiddle demo using JavaScript like the OP originally wanted, but instead of using live(), I use setInterval():

First, we need to declare a couple variables for use later:

var $centerMessage,
    intervalId;

The OP's issue was that they didn't know when the div was going to be created, so with that in mind we create a function to do just that and call it via setTimeout() to simulate this div creation:

function createDiv() {

    $('<div class="centerMessage">Center Message Div</div>').appendTo("body");

}

$(function() { setTimeout("createDiv()", 5000); });

Finally, we need to create a function that will check, using setInterval() at a rate of 100ms, to see if the div has been created and upon creation, goes about modifying the div via jQuery:

function checkForDiv() {

    $centerMessage = $('.centerMessage');

    if ($centerMessage.length) {

        clearInterval(intervalId);

        var $window = $(window),
            winHeight = $window.height(),
            winWidth = $window.width(),
            positionTop = (winHeight / 2) - ($centerMessage.height() / 2),
            positionLeft = (winWidth / 2) - ($centerMessage.width() / 2);


        $centerMessage.css({

            "display" : "block",
            "position" : "absolute",
            "top" : positionTop.toString() + "px",
            "left" : positionLeft.toString() + "px"

        });

    }

}

$(function() { intervalId = setInterval(checkForDiv, 100); });

---

Try Use this

$('.centerMessage').live('click', function(){

---

Try this

$('#foo').on('click', function() {
  alert($(this).text());
});

$('#foo').trigger('click');

OR

$('#foo').live('click', function() {
  alert($(this).text());
});

$('#foo').trigger('click');