動態更改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()。其餘的代碼工作正常。