Change style of ajax rendered controls using jQuery
If I am using ajax control tool kit in my web application, let me know how can I change the style of ajax rendered controls. For example, if I need to format buttons created for a NumericUpDown control开发者_开发百科, where should I write the jQuery for it. I wrote it in document.ready, but did not get the expected result.
So I think, even at the time of document.ready,the control is not rendered.
For example, I find the button created for up and down, changes it background color and font color (using a class 'NumericUPDownButton')
<script type="text/javascript">
$(document).ready(function() {
$('input[id$=_bUp]').removeAttr('style');
$('input[id$=_bUp]').addClass('NumericUPDownButton');
$('input[id$=_bDown]').removeAttr('style');
$('input[id$=_bDown]').addClass('NumericUPDownButton');
});
</script>
<style>
.NumericUPDownButton
{
border-bottom: 0px outset;
border-left: 0px outset;
line-height: 1em;
width: 24px;
font-family: Webdings;
height: 12px;
font-size: 9pt;
overflow: hidden;
border-top: 0px outset;
border-right: 0px outset;
background-color:#383838;
color:White;
}
</style>
But It does not changes the style? Can you imagine "Why ?"
Try this Code
<script type="text/javascript">
$(document).ready(function() {
var styleVar='border-bottom: 0px outset;
border-left: 0px outset;
line-height: 1em;
width: 24px;
font-family: Webdings;
height: 12px;
font-size: 9pt;
overflow: hidden;
border-top: 0px outset;
border-right: 0px outset;
background-color:#383838;
color:White;';
$('input[id$=_bUp]').attr('style',styleVar);
$('input[id$=_bDown]').attr('style',styleVar);
});
</script>
See http://hungred.com/useful-information/css-priority-order-tips-tricks/
for late binding, u can use .live method, see doc how to bind event with functionality in .live funcion
Hummm...
you should add class name as you enter in css or style:
.addClass('NumericUPDownButton')
精彩评论