jQuery making adiv tag with muiltiple parameters how to use Quotes inside

Question

If I have "" with single quotes inside, it shows F3-R06, but the move over and mouse out do not work. if I take this out of the jQuery it works fine, but how to I use the quotes inside it does nothing. What kind of quoting do I need inside ""? I tried "" and this """ but nothing works

<script type="text/javascript">
$(function drawdiv()
    {
        $("<div onmouseover="mOver(this,'Fred Flintstone')"  onmouseout="mOut(this,'F3-R06')" style='background-color:#D94A38;width:30px;height:30px;padding:20px'>F3-R06</div>").appendTo("body"); 
    })
</script>
<script>

function mOver(obj,name)
    {
        obj.innerHTML=name
    }

function mOut(obj,room)
    {
        obj.innerHTML=room
    }
</script>

Answer 1

You have two separate problems with quotes there. One is the jQuery selector quotes and the other the quotes within the div's js attributes.

First, by convention, consider using single quote inside of jQuery selectors so that you can use double quotes as needed for HTML attributes and the like.

$('<div id="this-is-fine"></div>').blah();

Second, when you have to have more than two quote types in the selector, you can escape them with a backslash(\).

$('<div onmouseover="mOver(this,\'Fred Flintstone\')"  onmouseout="mOut(this,\'F3-R06\')" style="background-color:#D94A38;width:30px;height:30px;padding:20px">F3-R06</div>').appendTo('body');

Third, maybe consider drinking a little more of the jQuery Kool-Aid.

jQuery('<div>F3-R06</div>')
    .attr('onmouseover', 'mOver(this, "Fred")')
    .attr('onmouseout', 'mOver(this, "F3-R06")')
    .css({ 
        'background-color' : '#D94A38', 
        'width' : '30px',
        'height' : '30px',
        'padding' : '20px'
        })
    .appendTo('body');

Slightly more kool-aid gets you here:

$('<div data-alt-text="Fred">F3-R06</div>')
    .hover(function (){ //first is mouseenter
        altText($(this));
    },
    function () { // second is mouseleave
        altText($(this)); 
    })
    .addClass('f3-box') // css is handy.
    .appendTo('body');

function altText ($obj){
    var text = $obj.text();
    // wang dang and reverse it - ms elliot
    $obj.text( $obj.attr('data-alt-text') );
    $obj.attr('data-alt-text', text )
}    

<style>
    .f3-box{
        background-color: #D94A38, 
        width: 30px,
        height: 30px,
        padding: 20px
    }
</style>

More on .hover() in the jquery docs