动态创建的按钮没有出现答案

【问题标题】：dynamically created button not appearing动态创建的按钮没有出现
【发布时间】：2020-01-20 14:18:12
【问题描述】：

我已经动态创建了两个将在单击按钮时出现的按钮，但这些按钮没有出现，我认为从我所做的研究来看，这是由于在页面加载后尝试添加按钮。然后我尝试使用 $('body').on('click', '.edit', edit);按照here 的解释添加按钮。

$(document).ready(function() {
  $('body').on('click', '.edit', edit);

  function edit() {

    var edit = $(this);
    var value = edit.val();
    edit.hide();
    var cancelBtn = document.createElement('button');
    cancelBtn.type = "button";
    cancelBtn.name = "Cancel";
    cancelBtn.className = "btn btn-primary cancel";
    cancelBtn.style.visibility = 'visible';

    var saveBtn = document.createElement('button');
    saveBtn.type = "submit";
    saveBtn.value = value;
    saveBtn.name = "Save Changes";
    saveBtn.className = "btn btn-primary save";
    saveBtn.formAction = '@Url.Action("Edit")';
    saveBtn.style.visibility = 'visible';


    $(".cancel").click(function cancel() {
      edit.show();
      document.getElementById("save").style.visibility = "hidden";
      document.getElementById("cancel").style.visibility = "hidden";
    });
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" class="edit">Edit</button>
<button type="button" class="cancel">Cancel</button>

【问题讨论】：

实际将创建的按钮元素放置在页面中的代码行在哪里？
我给你做了一个sn-p。请更正并添加相关的 HTML - 我也更改了一对引号。为什么在一个地方使用 ID 而在另一个地方使用 CLASS？
请显示您将cancel 类添加到按钮的位置，您还可以将该事件处理程序附加到您实际拥有的父元素上，当您将代码放在这里时也将其附加到。
缺少appendChild 奇怪的是你也在混合使用 jQuery 和 DOM。
document.createElement() 只在浏览器内存中创建一个元素。它不会自动将元素放置到页面上。 JQuery 有一个不同的系统来创建新的 HTML 元素 ($('<button>'))，因此人们说你在混合 DOM 和 Jquery 代码。请阅读 JQuery 教程。当可能每个教程都提到这一点并且我们有多个重复项，例如 stackoverflow.com/questions/8936652/… 时，我们给您代码是没有用的

标签： javascript jquery

【解决方案1】：

你需要的是append你的新元素到某个容器。

https://www.w3schools.com/jquery/jquery_dom_add.asp

这是我的示例 js 代码：

$(document).on('click', '.edit', function() {
    debugger;
    //It's much easier to create element by html string with jQuery
    $('.actions').append('<button id="cancel" class="btn btn-primary cancel">Cancel</button>');
    $('.actions').append('<button id="save" type="commit" class="btn btn-primary save" value="' + $(this).val() + '">Save</button>');

    $(this).hide();

});
$(document).on('click', '.save', function() {
    alert('saved');
    $(this).remove();
    $('#cancel').remove();
})

$(document).on('click', '.cancel', function() {
    $(this).remove();
    $('#save').remove();
})

这里是示例 html：

<HTML>
<BODY>
    <form id="dosomething">
        <div class='actions'>
            <button type="button" class="edit" value="some value">Click Me!</button>
        </div>
    </form>
</BODY>
</HTML>

【讨论】：