Question

I have this jquery issue that seems to only break when using background image url. My impression is that it looks like a character escape issue, but i could be wrong.

Here’s what i have for a working demo version: http://jsfiddle.net/W4CZG/

Essentially i have some draggable divs with inline style in the html:

<div class="dragme" style="background-color:#ccc;">1</div>
<div class="dragme" style="background-image:url(images/image1.gif);">2</div>

On the script, i’ve currently used the following to add a span tag inside the droppable area to set the style:

$(this).html('<span style="' + draggable.attr('style') + '"></span>');

The first div, with the background color, works fine. Looking in firebug, it creates something like:

<span style="background-color: rgb(204, 204, 204);"></span>

If i use any other style – like margin, font, etc – it works also. But my problem, and hence my question here, is with the background image, the generated span tag doesn’t get the background image inline style, it instead gets all messed up? In firebug i see this:

<span );="" image1.gif="" images="" style=""></span>

Is this a charcater escape issue? And more importantly, how do i fix this?

Thanks for your time!

Answer 1

You should do

$('<span/>', { style: draggable.attr('style') })

That would handle all the escaping problems for you.

In your case,

$(this).html('<span style="' + draggable.attr('style') + '"></span>');

would become

$(this).html($('<span/>', { style: draggable.attr('style') }));