動的にtdタグのhtmlを変更する

Question

編集機能が起動されると、id "promo1"のtdはhtmlを変更して、オプションのsave delete ruleとcancelを表示します。 cancelは、 "cancel（）"というonclick関数を持つタグの中にあります。これをクリックすると、tdタグ "promo1"がイメージセットに戻されます。しかし、onclickがtdタグ "promo1"のcancelタグから来ているのに、キャンセルボタンから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()。残りのコードは正常に動作します。