Question

我通过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();
        }
      }
    });
  }

我试图将

更改为

Answer 1

您需要使用okhttp3.VERSION，以便您的event Delegation监听DOM的点击事件。通过使用dynamically 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()

在页面加载后单击添加的按钮

1 个答案: