动态创建按钮不显示求助：点击Edit按钮无法生成目标按钮

我帮你梳理出几个导致按钮无法显示的关键问题，咱们逐个解决：

1. 最核心的问题：动态创建的按钮没加入到页面DOM中 #

你用document.createElement成功创建了cancelBtn和saveBtn，但没有把它们添加到页面的DOM结构里——就像你做好了按钮却没把它放到页面上，浏览器自然没法渲染出来。你需要在创建按钮后，把它们插入到合适的位置，比如Edit按钮的旁边或者父容器里。

2. 动态按钮的事件绑定无效 #

你给.cancel绑定点击事件的方式是$(".cancel").click(...)，但这个按钮是点击Edit后才动态生成的，普通的click绑定只能作用于页面加载时就存在的元素。得和Edit按钮一样用事件委托来绑定。

3. 元素获取逻辑错误 #

你代码里用document.getElementById("save")和document.getElementById("cancel")来控制可见性，但你创建按钮时根本没给它们设置id属性，所以这两行代码会找不到元素，等于白写。直接操作你创建的DOM对象会更可靠。

4. 初始页面中的Cancel按钮干扰逻辑 #

你的HTML里一开始就有一个.cancel按钮，这会和你动态生成的按钮混淆，建议一开始就把它隐藏，或者干脆不要提前写在HTML里，完全通过JS动态生成。

修改后的完整代码 #

HTML部分（移除初始的Cancel按钮，避免干扰）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="edit">Edit</button>
<!-- 这里不再提前写Cancel按钮，完全由JS动态生成 -->

JavaScript部分

$(document).ready(function() {
  // 事件委托绑定Edit按钮点击事件
  $('body').on('click', '.edit', edit);
  // 事件委托绑定Cancel按钮点击事件（动态生成的按钮也能触发）
  $('body').on('click', '.cancel', cancel);

  function edit() {
    var $editBtn = $(this);
    var value = $editBtn.val();
    $editBtn.hide();

    // 创建Cancel按钮
    var cancelBtn = document.createElement('button');
    cancelBtn.type = "button";
    cancelBtn.innerText = "Cancel"; // 注意：用innerText设置按钮显示文字，不是name
    cancelBtn.className = "btn btn-primary cancel";

    // 创建Save按钮
    var saveBtn = document.createElement('button');
    saveBtn.type = "submit";
    saveBtn.value = value;
    saveBtn.innerText = "Save Changes";
    saveBtn.className = "btn btn-primary save";
    saveBtn.formAction = '@Url.Action("Edit")';

    // 把两个按钮插入到Edit按钮的后面
    $editBtn.after(saveBtn, cancelBtn);
  };

  function cancel() {
    // 找到对应的Edit按钮并显示
    var $cancelBtn = $(this);
    $cancelBtn.siblings('.edit').show();
    // 移除动态生成的Cancel和Save按钮
    $cancelBtn.siblings('.save').remove();
    $cancelBtn.remove();
  };
});

关键修改点说明： #

• 给动态创建的按钮添加了innerText设置按钮显示文字（之前你用name属性，这不是用来显示按钮文字的）
• 用$editBtn.after()把新按钮插入到Edit按钮后面，成功加入DOM
• 用事件委托绑定Cancel按钮的点击事件，确保动态生成的按钮能触发
• 取消了不靠谱的getElementById，改用jQuery的兄弟元素选择器来操作对应的按钮
• 点击Cancel时直接移除动态按钮，而不是隐藏，避免DOM里堆积无用元素

内容的提问来源于stack exchange，提问作者Dominik Willaford