Prepend/Append don't Work (Opera, Safari, Chrome)

问题

Comarades,

I tried using the append and prepend (), but none of the controls work. Could anyone help me? In Internet Explorer and Firefox works.

The Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title></head>

 <script type="text/javascript" src="raphael-min.js"></script>
 <script type="text/javascript" src="jquery-1.4.2.js"></script>
 <script type="text/javascript">

 selEstrutura = function(strComponent, strDestino)
 {
var objDest = $('#' + strDestino);
var objComp = $('#' + strComponent);
if ((objComp != null) && (objDest != null))
{
    $('#' + strDestino + ' img').remove();
    objDest.append('<img id="' + strDestino + '" src="' + objComp.val() + '"');
    if ((strDestino.trim() == 'eixoTracionado1') || (strDestino.trim() == 'eixoTracionado2'))
    {
        $('#eixoEstruturaPt1 img').remove();
        $('#eixoEstruturaPt1').append('<img id="eixoEstruturaPt1" src="estrutura_semrodas.gif"');

        $('#eixoEstruturaPt2 img').remove();
        $('#eixoEstruturaPt2').append('<img id="eixoEstruturaPt2" src="estrutura_semrodas.gif"');
    }
}
 }

</script>

<body>
<div align="left" style="width:20%;float:left;height:300px;border:groove;border-color:#000000;margin-left:0px;">
    <div align="right" style="float:left;width:30%">Tração:&nbsp;</div>
    <div style="float:right;width:70%">
        <select id="cboTracao" onchange="selEstrutura('cboTracao','eixoTrator');">
            <option value="">&nbsp;</option>
            <option value="eixotrator_rodaunica.gif">Única</option>
            <option value="eixotrator_rodasimples.gif">Simples</option>
            <option value="eixotrator_rodadupla.gif">Dupla</option>
        </select>
    </div>
    <div align="right" style="float:left;width:30%">Tracionado(1):&nbsp;</div>
    <div style="float:right;width:70%">
        <select id="cboTracionado1" onchange="selEstrutura('cboTracionado1','eixoTracionado1');">
            <option value="">&nbsp;</option>
            <option value="eixotracionado_rodadosimples.gif">Simples</option>
            <option value="eixotracionado_rodadoduplo.gif">Duplo</option>
        </select>
    </div>
    <div align="right" style="float:left;width:30%">Tracionado(2):&nbsp;</div>
    <div style="float:right;width:70%">
        <select id="cboTracionado2" onchange="selEstrutura('cboTracionado2','eixoTracionado2');">
            <option value="">&nbsp;</option>
            <option value="eixotracionado_rodadosimples.gif">Simples</option>
            <option value="eixotracionado_rodadoduplo.gif">Duplo</option>
        </select>
    </div>
    <div align="right" style="float:left;width:30%">Qtd Estepes:&nbsp;</div>
    <div style="float:right;width:70%">
        <select id="cboEstepes" onchange="selEstrutura('cboEstepes','eixoEstepes');">
            <option value="">&nbsp;</option>
            <option value="estepe_simples.gif">01</option>
            <option value="estepe_duplo.gif">02</option>
            <option value="estepe_triplo.gif">03</option>
        </select>
    </div>
</div>

<div id="prompt" align="center" style="width:79%;float:right;border:groove;border-color:#000000;height:300px">
    <div style="margin-left:30%">
        <div id="eixoEstepes" style="float:left;margin-left:10px"></div>
        <div style="width:20%;float:left"></div>
        <div id="eixoTrator" style="float:left"></div>
        <div id="eixoEstruturaPt1" style="float:left"></div>
        <div id="eixoEstruturaPt2" style="float:left"></div>
        <div id="eixoTracionado1" style="float:left"></div>
        <div id="eixoTracionado2" style="float:left"></div>
    </div>
</div>
 </body>
 </html>

Sugestions (Modified)

Performing some suggested changes, still not working.

<script type="text/javascript">

selEstrutura = function(strComponent, strDestino)
{
var objDest = $('#' + strDestino);
var objComp = $('#' + strComponent);
if ((objComp != null) && (objDest != null))
{
    $('#' + strDestino + ' img').remove();
    objDest.append('<img id="' + strDestino + '_img" src="' + objComp.val() + '"');
    if ((strDestino.trim() == 'eixoTracionado1') || (strDestino.trim() == 'eixoTracionado2'))
    {
        $('#eixoEstruturaPt1 img').remove();
        $('#eixoEstruturaPt1').append('<img id="eixoImgEstruturaPt1" src="estrutura_semrodas.gif"');

        $('#eixoEstruturaPt2 img').remove();
        $('#eixoEstruturaPt2').append('<img id="eixoImgEstruturaPt2" src="estrutura_semrodas.gif"');
    }
}
} 

</script>

回答1:

Well one thing that looks odd to me is that you're adding <img> tags with "id" values that exactly duplicate other "id" values in other tags. Maybe WebKit doesn't like that; it's definitely a bad thing to do.

Try a change like this:

objDest.append('<img id="' + strDestino + '_img" src="' + objComp.val() + '"');

Also it looks to me as if you're forgetting the ">" at the end of your elements! Should look like this:

objDest.append('<img id="' + strDestino + '_img" src="' + objComp.val() + '">');

(If your DOCTYPE is XHTML you should use "/>" of course, but yours is "html".)

回答2:

These will never be null. They will always contain a jQuery object (even if it is empty of elements).

if ((objComp != null) && (objDest != null))

You should test using the length property.

if ((!objComp.length) && (!objDest.length))

Also, as far as I can tell, you are creating a new element that has the same ID as the existing strDestino element.

objDest.append('<img id="' + strDestino + '" src="' + objComp.val() + '"');

You can't have 2 elements with the same ID.

回答3:

Source Working in: Opera, Safari, Chrome, IE, Mozilla.

selEstrutura = function(strComponent, strDestino)
{
$('#' + strDestino + ' img').remove();
$('#' + strDestino).append('<img id="' + strDestino + '_img" src="' + $('#' + strComponent).val() + '">');
if ((strDestino == 'eixoTracionado1') || (strDestino == 'eixoTracionado2'))
{
    $('#eixoEstruturaPt1 img').remove();
    $('#eixoEstruturaPt1').append('<img src="estrutura_semrodas.gif" alt=""/>');

    $('#eixoEstruturaPt2 img').remove();
    $('#eixoEstruturaPt2').append('<img src="estrutura_semrodas.gif" alt=""/>');
}
}

I made the changes suggested by friends, but in some browsers was not working. After some testing, I discovered that the method ". Trim ()" was not working properly.

Thanks for the help of all.

回答4:

Had the same problem. A php script generated a json that was passed to jquery.each(). Firefox showed rows in correct order while chrome displayed them in reverse.

The problem was caused by object keys. Chrome sorted the array using the keys before foreach. The solution in my case was to use an auto incremented value as key instead of my old, revision number key, which was in reverse.

来源：https://stackoverflow.com/questions/3087452/prepend-append-dont-work-opera-safari-chrome

标签

javascript

jquery

browser