javascript - Changing the html of a td tag dynamically -

when edit function triggered td id "promo1" changes html show options save delete rule , cancel. cancel in tag onclick function called "cancel()". when clicked should revert td tag "promo1" image set. doesnt work when onclick coming cancel tag in td tag "promo1" works when cancel() function triggered cancel button, clues why occurring , fixes?

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>

i think looking for:

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>

use onclick event on <img> instead of <td> , include onclick='edit(1)' in cancel(). rest of code works fine.