动态更改td标签的html

Question

当编辑功能被触发时，id为“promo1”的td更改其html以显示选项保存删除规则并取消。取消是一个带有名为“cancel（）”的onclick函数的标签。点击时，应该将td标签“promo1”还原为图像集。但是，当onclick来自td标签“promo1”中的取消标签时，这不起作用，但是当取消按钮触发cancel（）函数时，它会起作用，这是为什么会发生并修复的线索？

function edit(stringID){ 
 
    console.log (stringID); 
 
    var id = '#promo' + stringID; 
 
    $("#promo1").html("<div style='width:200px'><a onclick='save()' style='margin-right:10px'><b>Save</b></a> <a onclick='save()' style='margin-right:10px'><b>Delete Rule</b></a> <a onclick='cancel()'><b>Cancel</b></a><div>"); 
 
} 
 

 
function cancel() { 
 
    $("#promo1").html("<img src='dist/img/editButton.png'>"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table> 
 
     <tr style="border-bottom: 1px solid #f4f4f4;"> 
 
      <td data-field="margin">15%</td> 
 
      <td data-field="promo">Promotion Role 1</td> 
 
      <td id="promo1" onclick="edit('1')" style="float:right"><img src="dist/img/editButton.png"></td> 
 
      </tr> 
 
</table> 
 

 
<button onclick="cancel()">Cancel Button</button>

Answer 1

我觉得这是你在找什么：

function edit(stringID){ 
 
    console.log (stringID); 
 
    var id = '#promo' + stringID; 
 
    $("#promo1").html("<div style='width:200px'><a onclick='save()' style='margin-right:10px'><b>Save</b></a> <a onclick='save()' style='margin-right:10px'><b>Delete Rule</b></a> <a onclick='cancel()'><b>Cancel</b></a><div>"); 
 
} 
 

 
function cancel() { 
 
    $("#promo1").html("<img src='dist/img/editButton.png' onclick='edit(1)'>"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table> 
 
    <tr style="border-bottom: 1px solid #f4f4f4;"> 
 
    <td data-field="margin">15%</td> 
 
    <td data-field="promo">Promotion Role 1</td> 
 
    <td id="promo1" style="float:right"><img src="dist/img/editButton.png" onclick="edit(1)"></td> 
 
    </tr> 
 
</table> 
 

 
<button onclick="cancel()">Cancel Button</button>

使用onclick事件上<img>而不是<td>，也包括onclick='edit(1)'在cancel()。其余的代码工作正常。