jsを使用してボタンを作成し、ユーザーが開いたときにhtmlに追加すると、注文に商品が追加され、同じ商品を削除するボタンが追加されます。問題が発生しているのはそのボタンです。ボタンのクラスはdeletePratoですが、ボタンを作成する前に.click（）を読み取るため、希望どおりに反応しません。
$('#orderDiv').click(function() {
$('#escondido').hide();
$('#ordersDiv').show();
for (var i = 0; i < order.length; i++) {
if (order[i] == food[contador]['id']) {
orderVerificacao = true;
quantityTemp = $('#quantity'+order[i]).val();
$('#quantity'+order[i]).val(++quantityTemp);
}
}
if (!orderVerificacao) {
order[contadorOrder] = food[contador]['id'];
// This is here I add a new button
$('#ordersDiv').append('<p class="deletePrato" value="'+food[contador]['id']+'">X</p>');
console.log(order);
contadorOrder++;
// Here I call the function to read .click()
deletar();
}
orderVerificacao = false;
});
しかし、.click（）を実行した後にボタンを追加したので、新しいボタンを作成するたびに.click（）を再度読み取るように関数を作成しましたが、ボタンはそれでも反応せず、 .click（）を読んでください。
// The function to read .click()
function deletar() {
$('.deletePrato').click(function() {
pratoDelete = $(this).val();
for (var i = 0; i < order.length; i++) {
if(order[i] == pratoDelete){
var index = order.indexOf(i);
if (index > -1) {
order.splice(index, 1);
}
$('#quantity'+pratoDelete).remove();
$('#escondido').show();
$('#ordersDiv').hide();
}
}
});
}
<p>を<button>に変更し、属性onClick = "delete（）"を作成しようとしましたが、ボタンが反応せずに続行しました。誰かが私を助ける方法を知っているなら、私は本当に感謝しています。
（編集）これが私のHTMLで、WebARアプリケーションです
<html lang="en">
<head>
<link rel="apple-touch-icon" href="./imagens/dimmersions_logo.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>AR Food</title>
<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.0.5/aframe/build/aframe-ar.js"></script>
<script src="scripts/localforage.js" charset="utf-8"></script>
<script src="scripts/lodash.js" charset="utf-8"></script>
<script type="text/javascript">var resultado =<?php echo json_encode($resultado); ?>;</script>
<script src="scripts/scriptIndex.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body id="body">
<div id="mesaDiv">
<p class="order">Table Number</p>
<select class="formMesa" id="mesaId">
<?php
for ($i=1; $i <= $numMax; $i++) {
echo "<option value='".$i."'>".$i."</option>";
}
?>
</select>
<button type="button" class="myButton" id="start">Start</button>
</div>
<div class="deletePrato"></div>
<div id="ordersDiv">
<p class="close" id="closeOrders">X</p>
</div>
<div id="escondido" hidden="true">
<div id="swiper"></div>
<div id="orderDiv">
<p class="order">Order</p>
</div>
<div id="tituloDiv">
<p id="nameFood"></p>
</div>
<img id="loadingGif" alt="loadingGif" src="./imagens/load.gif">
<div id="swipeDiv">
<img id="swipeImg" alt="swipeImg" src="./imagens/swipe.png">
<p id="swipe">Swipe for next dish</p>
</div>
<div id="ingredientesBar">
<p id="seta">↑</p>
<p id="ingredientesSwipe">Ingredients</p>
</div>
<div id="ingredientsDiv" hidden="true">
<p class="close" id="closeIngredientes">X</p>
<ul style="padding: 1em 3em" id="ulIngredientes">
</ul>
</div>
</div>
<div id="markerInicial">
<img id="markerOpacidade" alt="markerOpacidade" src="./imagens/pattern-restaurant-menu.png">
<p id="markerTitulo">Please point to the marker</p>
</div>
<a-scene arjs='trackingMethod: best; sourceWidth:1280; sourceHeight:960; debugUIEnabled:false' embedded vr-mode-ui="enabled: false">
<a-assets id="assets">
</a-assets>
<a-marker detect-marker id="marker" preset='custom' type='pattern' url='./markers/pattern-restaurant-menu.patt' smooth="true">
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
のクリックイベントをリッスンするevent Delegationように使用する必要があります。を使用してDOMdynamically appended element.on
また、値を取得するには、クリックしたアイテムの値を取得pするために使用attrする必要があります。
各行にもコメントを追加しました。クリック機能を以下のように変更すると、正常に機能するはずです。
参考までに-関数も必要ありませんdeletar。それを持っているかどうかはそれまでです。Event delegationクリックすると.deletePrato、が呼び出され、必要なアイテムが削除されます。
以下のスニペットを実行します。
//The function to read .click()
function deletar() {
//Change your to click to this below.
$(document).on('click', '.deletePrato', function() {
//Get the p value like this
var pratoDelete = $(this).attr('value');
console.log(pratoDelete)
});
}
deletar()<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="deletePrato" value="1">Click Me 1 </p>
<p class="deletePrato" value="2">Click Me 2</p>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加