How can I keep this appended DIV in place after "price" changes?

Question

I am designing this site on a custom built CMS, developed by my old job:

http://dev544.webdugout.com/View/Snow-Removal

In order for me to move the price div "productPrice" to the bottom of the page, I used the following:

$(".productPrice").appendTo(".productPriceContainer");

I also used the following to add text in front of the numeric price:

$( ".productPrice" ).prepend( '<h2><span>4</span> Your Total Cost Will Be</h2>');

Everything LOOKS great, though once you choose an option, which changes the price, the div goes back into it's original position in the code and also removes the text I added. Any way I can resolve this with jQuery and without having to approach their programmer about this?

Thanks!

Answer 1

The reason the elements are moving to the top is because that is their original position in the DOM when the page is first loaded. When you select an item from the dropdown the page is performing a postback and your javascript is not called again. Try using the code below. This should cause your javascript to be called each time you perform a postback.

        function pageLoad() {
            BindjQueryEvents();
            $(".productPrice").prepend('<h2><span>4</span> Your Total Cost Will Be</h2>');
        }
        //Re-bind for callbacks
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () {
            BindjQueryEvents();
        });
        function BindjQueryEvents() {

            $(".productPrice").appendTo(".productPriceContainer");
        }