inline style not applied on dynamically created input

Question

Consider:

  $( "#scanInDialogItems tr td:nth-child( 3 )").mouseenter( function() {
     var q = $( this ).html();
     $( this ).html( "<input type='number' style='text-align:right width:50px' min='1' value='" + q + "'/>" );
  }).mouseleave( function() { 
     var q = $( this ).find( "input" ).val();
     $( this ).html( q );
  });

Whenever the user hovers over a cell in the third column of my table, the content is replaced with an input element. Works like a charm.

The problem is that the inline styling for this element is not properly applied. E.g. the text in the box for example aligns left - the default. Also the width is not set.

I read in an earlier question that dynamically created input elements need to be refreshed when created:

Styles not getting applied properly in dynamically created radio buttons

So I tried adding this:

     $( this ).find( "input" ).textinput( 'refresh' );

And or this:

     $( this ).find( "input" ).textinput();

But neither of those works. My target platform is the latest chrome.

Am I not refreshing input correctly? Or is there some other problem?

I think that link only applies to jQuery mobile. Anyways, can you give the input a class and then define the styling with CSS for that class? Does the min attribute work if you try to type in it? Like if you try to type in -23, does it show an error on the page? — Ian
– Ian, Commented Nov 5, 2012 at 17:01
Comment rather than answer, but it may help... Is it necessary to add your styles inline with your new markup, could they be anticipated in prior CSS instead? — A.M. D.
– A.M. D., Commented Nov 5, 2012 at 17:03
I agree that it is better to put styles in css instead of inline. But inline is easier during development. I do a pass at the end creating styles in .css once I everything works. — Rafael Baptista
– Rafael Baptista, Commented Nov 5, 2012 at 17:05

Reinstate Monica Cellio · Accepted Answer · 2012-11-05 17:02:25Z

3

You've missed a semicolon between text-align and width in the inline style...

$( "#scanInDialogItems tr td:nth-child( 3 )").mouseenter( function() {
    var q = $( this ).html();
    $( this ).html( "<input type='number' style='text-align:right;width:50px' min='1' value='" + q + "'/>" );
}).mouseleave( function() { 
    var q = $( this ).find( "input" ).val();
    $( this ).html( q );
});

I just tried a before & after in jsfiddle and that's all that was wrong with it :)

answered Nov 5, 2012 at 17:02

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

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

Collectives™ on Stack Overflow

inline style not applied on dynamically created input

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related