我在 Firefox 和 IE 中运行 js 脚本时遇到问题,但在 Chrome 上运行正常。 而且到目前为止我还没有找到满意的答案。 我必须建立一个表格来订餐,并且我必须能够添加补充品。 用户必须点击此处:
<a href="#" class="ajoutPlat"><img src="images/plusdetour.png" width="25" height="25" alt="plusdetour"/>
我应该向我的 html 添加一个从隐藏 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);
}
});
});
到目前为止一切正常。我想知道为什么它不再工作了。
<小时/>解决方案
原来问题出在我的 jQuery 中的 $.browser,为了解决这个问题,我使用了
<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 一切正常。 使用 Firebug 、 FF 插件发现了该问题。
最佳答案
首先:不要使用live
。使用委托(delegate)。 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
。只是为了安全起见。
关于javascript - 该功能在 chrome 中运行良好,但在 IE 和 Firefox 中运行不佳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25161128/