Question

我已经做了一些关于如何将原始html按钮替换/更改为另一个的研究。但这两种方式都不起作用。

以下是我的代码：

使用Javascript：

var editBtn = "editBtn" + id; //in order to get the id of the edit button
var cSave = document.getElementById(editBtn);
cSave.innerHTML = "<td><button id='saveBtn' onclick='saveChange(" + id + ");' >Save</button></td>";

上面的代码只是在现有按钮内添加一个按钮。

HTML：

<table>
<td>
<%
  out.println("<button id='editBtn" + mc.getId() + "' onclick='editMC(this.id);'>Edit</button>");
%>
</td>
</table>

mc.getId（）是获取“id”的方法。

我尝试过的最新方法如下所述，但它不起作用：

document.getElementById(editBtn).onclick = function() {saveChange(id)};

和

$(document).ready(function () {
      $("#editBtn").replaceWith("<td><button id='saveBtn' onclick='saveChange(" + mcId + ");' >Save</button></td>");
});

无论如何，我可以在执行onclick（）时更改编辑按钮以保存按钮？

Answer 1

将ID包含在引号中（除非它是变量名称）：

document.getElementById("editBtn");

在jQuery中它将介于这两行之间：

var mcId = 'bla';

function saveChange(){
  alert( mcId );
}


$(function () { // DOM ready shorthand


   $("#editBtn").click(function(){
      $(this).replaceWith("<button id='saveBtn'>Save</button>");
   });

  // Than, for your dynamically generated element use:

  $('#parent').on('click', "#saveBtn", function(){
     saveChange( mcId );
  });

});

<强> jsBin demo

请注意，我用于静态元素引用非动态#parent。你应该这样做（以防止绑定到$(document)，因为在DOM上一直听到事件是非常昂贵的。）

jQuery .on() with event delegation for dynamically generated elements

Answer 2

您可以使用innerHtml将按钮的文本从编辑更改为保存。你实际上在按钮元素中放了一些html。试试

var cSave = document.getElementById(editBtn);
cSave.innerHTML = "Save";
cSave.onclick = function() {saveChange(id)};

用jquery替换html按钮

2 个答案: