该功能适用于chrome,但不适用于IE和Firefox

Function works fine with chrome but not in IE and Firefox

本文关键字:适用于 IE 不适用 Firefox 功能 chrome      更新时间:2023-09-26

我在firefox和IE中运行js脚本有问题,但它在Chrome上运行良好。到目前为止,我还没有找到满意的答案。我必须建立一个表单来订餐,我必须能够添加补充剂。用户必须点击这里:

<a href="#"  class="ajoutPlat"><img src="images/plusdetour.png" width="25" height="25" alt="plusdetour"/>

,我应该添加一个从隐藏的div克隆的下拉列表到我的HTML。

<table border="0">
<thead>
    <tr>
        <th>Supplements disponibles</th>
    </tr>
    <tr>
        <th>________________</th>
    </tr>
</thead>
<tr>
    <td><p>Plat supplementaire</p></td>
    <td><a href="#"  class="ajoutPlat"><img src="images/plusdetour.png" width="25" height="25" alt="plusdetour"/></a>
    </td>
</tr>
<tr>
    <td><p>Garniture supplementaire</p></td>
    <td><a href="#" class="ajoutGarniture"><img src="images/plusdetour.png" width="25" height="25" alt="plusdetour"/></a>
    </td>
</tr>
<tr>
    <td><p>Pain Supplemaentaire</p></td>
    <td><a href="#" class="ajoutPain"><img src="images/plusdetour.png" width="25" height="25" alt="plusdetour"/></a>
    </td>
</tr
<tr>
    <td><p>Potage</p></td>
    <td><a href="#" class="ajoutPotage"><img src="images/plusdetour.png" width="25" height="25" alt="plusdetour"/></a>
    </td>
</tr>
<?php
foreach ($elementsSupplements as $element) {
    echo '<tr>'
    . '<td>'
    . '<p>' . $element . '</p>'
    . '</td>'
    . '<td>'
    . '<a href="#" class="ajout' . $element . '"><img src="images/plusdetour.png" width="25" height="25" alt="plusdetour"/></a>'
    . '</td>'
    ;
}
?>
</table>
<br/>

JS

$(function() {
var z = 0;
var y = 0;
var x = 0;
var w = 0;
var lim1 = "Le nombre de plats , garnitures ou potages supplementaires est limité a 1";
var lim10 = "Le supplément selectionné ne sera pas rajouté , vous avez atteint la limite fixée a 10";
var choix = "Le potage n'est pas disponible si vous avez pris un plat et/ou une garniture supplémentaire";
$(".ajoutPlat").live('click', function() {
    if (z < 10 && x < 1 && w < 1) {
        plat = $('.plat:first').clone();
        $("<tr><td><p>+1 Plat</p></td><td id='addplat" + z + "'></td></tr></br>").appendTo("#supplements");
        plat.appendTo("#addplat" + z);
        z++;
        x++;
    } else {
        if (z > 10) {
            alert(lim10);
        } else if (x > 0) {
            alert(lim1);
        }
    }
});
$(".ajoutPotage").live('click', function() {
    if (z < 10) {
        if (w < 1) {
            if (x === 0 && y === 0) {
                plat = $('.potage:first').clone();
                $("<tr><td><p>+1 Potage</p></td><td id='addPotage" + z + "'></td></tr></br>").appendTo("#supplements");
                plat.appendTo("#addPotage" + z);
                z++;
                w++;
            } else {
                alert(choix);
            }
        } else {
            alert(lim1);
        }
    } else {
        alert(lim10);
    }
});
$(".ajoutGarniture").live('click', function() {
    if (z < 10 && y < 1 && w < 1) {
        garniture = $('.garniture:first').clone();
        $("<tr><td><p>+1 Garniture</p></td><td id='addGarniture" + z + "'></td></tr></br>").appendTo("#supplements");
        garniture.appendTo("#addGarniture" + z);
        z++;
        y++;
    } else {
        if (z > 10) {
            alert(lim10);
        } else if (y > 0) {
            alert(lim1);
        }
    }
});
$(".ajoutJournal-Eure-Info").live('click', function() {
    if (z < 10)
    {
        jei = $('.Journal-Eure-Info:first').clone();
        $("<tr><td><p>+1 Journal</p></td><td id='addJournal-Eure-Info" + z + "' class='cellCentre'></td></tr></br>").appendTo("#supplements");
        jei.appendTo("#addJournal-Eure-Info" + z);
        z++;
    }
    else
    {
        alert(lim10);
    }
});
$(".ajoutJournal-La-dépêche").live('click', function() {
    if (z < 10)
    {
        jld = $('.Journal-La-dépêche:first').clone();
        $("<tr><td><p>+1 Journal</p></td><td id='addJournal-La-dépêche" + z + "' class='cellCentre'></td></tr></br>").appendTo("#supplements");
        jld.appendTo("#addJournal-La-dépêche" + z);
        z++;
    }
    else
    {
        alert(lim10);
    }
});
$(".ajoutPanier-de-fruits").live('click', function() {
    if (z < 10)
    {
        pdf = $('.Panier-de-fruits:first').clone();
        $("<tr><td><p>+1 Panier</p></td><td id='addPanier-de-fruits" + z + "' class='cellCentre'></td></tr></br>").appendTo("#supplements");
        pdf.appendTo("#addPanier-de-fruits" + z);
        z++;
    }
    else
    {
        alert(lim10);
    }
});
$(".ajoutCroissant").live('click', function() {
    if (z < 10)
    {
        crs = $('.Croissant:first').clone();
        $("<tr><td><p>+1 Croissant</p></td><td id='addCroissant" + z + "' class='cellCentre'></td></tr></br>").appendTo("#supplements");
        crs.appendTo("#addCroissant" + z);
        z++;
    }
    else
    {
        alert(lim10);
    }
});

$(".ajoutPain-au-Chocolat").live('click', function() {
    if (z < 10)
    {
        pac = $('.Pain-au-Chocolat:first').clone();
        $("<tr><td><p>+1 Pain choco</p></td><td id='addPain-au-Chocolat" + z + "' class='cellCentre'></td></tr></br>").appendTo("#supplements");
        pac.appendTo("#addPain-au-Chocolat" + z);
        z++;
    }
    else
    {
        alert(lim10);
    }
});
$(".ajoutPain").live('click', function() {
    if (z < 10)
    {
        pan = $('.pain:first').clone();
        $("<tr><td><p>+1 Pain</p></td><td id='addPain" + z + "'></td></tr></br>").appendTo("#supplements");
        pan.appendTo("#addPain" + z);
        z++;
    }
    else
    {
        alert(lim10);
    }
});
});

到目前为止运行良好。我想知道为什么它不再工作了。


<

解决方案/strong>

原来问题是$。在我的jQuery浏览器中,为了解决这个问题,我使用了

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"</script>
<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script>

现在一切都工作良好的FF IE chrome和Safari。

第一个:不要使用live。使用代表团。Jquery早在1.7版就弃用了.live()方法(到现在已经有4年了)。反过来,事件冒泡是处理异步创建节点的自然方式。

$(function() {
var z = 0;
var y = 0;
var x = 0;
var w = 0;
var lim1 = "Le nombre de plats , garnitures ou potages supplementaires est limité a 1";
var lim10 = "Le supplément selectionné ne sera pas rajouté , vous avez atteint la limite fixée a 10";
var choix = "Le potage n'est pas disponible si vous avez pris un plat et/ou une garniture supplémentaire";
$(document).on('click',".ajoutPlat", function() {
    ...
});
$(document).on('click', ".ajoutPotage", function() {
    ...
});
$(document).on('click', ".ajoutGarniture", function() {
    ...
});
$(document).on('click', ".ajoutJournal-Eure-Info", function() {
    ...
});
$(document).on('click',".ajoutJournal-La-dépêche", function() {
    ...
});
$(document).on('click',".ajoutPanier-de-fruits", function() {
    ...
});
$(document).on('click', ".ajoutCroissant", function() {
   ...
});

$(document).on('click',".ajoutPain-au-Chocolat", function() {
    ...
});
$(document).on('click',".ajoutPain", function() {
    ...
});

第二个:注意不要尝试附加到还不存在的对象。例如

plat = $('.plat:first').clone();
$("<tr><td><p>+1 Plat</p></td><td id='addplat" + z + "'></td></tr></br>").appendTo("#supplements");
plat.appendTo("#addplat" + z);

可能起作用,也可能不起作用,取决于浏览器和星号的位置。正确的方法是

var plat = $('.plat:first').clone();
var newtr= $('<tr></tr>');
var addplat=$('<td id="addplat' + z + '"></td>');
plat.appendTo(addplat);
newtr.append('<td><p>+1 Plat</p></td>');
newtr.append(addplat);
newtr.appendTo("#supplements");

看,你不需要让jQuery去搜索DOM的"#addplat" + z(可能不在DOM到那时),因为你已经知道哪个节点是你的addplat对象,甚至在添加到DOM之前。

第三我不确定id中的特殊字符。它们应该可以工作,但我宁愿所有内容都使用ascii字符。例如,使用ajoutJournal-La-depeche类而不是ajoutJournal-La-dépêche类。为了安全起见。