Javascript $(var).html(data);不工作

Question

我目前正在使用 javascript 来尝试使用 ajax 更新页面。但是，使用 .html 使用我传入的参数来更新页面最终不会产生任何更改。 html 页面是一个按钮网格，我正在尝试使用“flaggedcell”img 更新被右键单击的按钮。我可以成功记录我要替换的数据，但是，在该行的正下方，.html 函数没有做任何事情。

Javascript：

$(function() {
  console.log("Page is ready");
  $(document).bind("contextmenu", function(e) {
    e.preventDefault();
    console.log("Right click. Prevent context menu from showing.")
  });

  $(document).on("mousedown", ".game-button", function(event) {
    switch (event.which) {
      case 1:
        var buttonNumber = $(this).val();
        console.log("Button number " + buttonNumber + " was left clicked");
        break;
      case 2:
        alert('Middle mouse button is pressed');
        break;
      case 3:
        event.preventDefault();
        var buttonNumber = $(this).val();
        console.log("Button Number " + buttonNumber + " was right clicked");
        doFlag(buttonNumber);
        break;
      default:
        alert('Nothing');
    }
  });
});

function doFlag(buttonNumber) {
  $.ajax({
    datatype: "json",
    method: 'POST',
    url: '/grid/flag',
    data: {
      "cellNumber": buttonNumber
    },
    success: function(data) {
      // this data logs succesfully
      console.log(data);
      //this changes nothing
      $("#" + buttonNumber).html(data);
    }
  })
}

数据html：

@model MinesweeperASP.NET.Models.Cell
@{
    //store image names in an array for more efficient code.
    string[] imageNames = { "UnoenedCell.png", "green.png", "bomb.png", "FlaggedCell.png" };
    int i = 0;
}
 
@if (!Model.isVisited && Model.isFlagged)
{
    i = 3;
}


<button class="game-button" type="submit" value="@Model.rowNumber,@Model.colNumber" name="cellNumber" asp-controller="Grid" asp-action="HandleLeftClick">
    <img class="game-button-image" src="~/img/@imageNames[i]" />
    <div class="button-label">
        @Model.rowNumber
        ,
        @Model.colNumber
    </div>
</button>

开发者工具输出：

Page is ready
site.js?v=yEzTfLHBcae6F8YYH3SeJjYAxKx_gxgY8BqS9gC2o5c:24 Button Number 0,1 was right clicked
site.js?v=yEzTfLHBcae6F8YYH3SeJjYAxKx_gxgY8BqS9gC2o5c:42  


<button class="game-button" type="submit" value="0,1" name="cellNumber" formaction="/Grid/HandleLeftClick">
    <img class="game-button-image" src="/img/FlaggedCell.png" />
    <div class="button-label">
        0
        ,
        1
    </div>
</button>


site.js?v=yEzTfLHBcae6F8YYH3SeJjYAxKx_gxgY8BqS9gC2o5c:5 Right click. Prevent context menu from showing.

Answer 1

您的按钮没有 id 属性。添加id属性并检查。