单击功能在jQuery中不起作用

Question

In following code i want to run a function when someone click on SELL button(first td) but on click function is not working. it says run function is not defined.

function runfunction() {
  alert("success");
}

sendRequest(); //call function
function sendRequest() {
  $.ajax({
    type: "POST",
    url: '<?php echo site_url("ajax/ajax_buybtc"); ?>',
    success: function(result) {
      var jsonResult = JSON.parse(result);
      $(".tab1 tr.tr1").remove();
      jsonResult.forEach(function(data) {
        var newTr = ""; // I delete the value to avoid double tr declaration
        newTr +=
          '<tr class="tr1"> <td onclick="runfunction()" style="text-align:center;"><a><span  class="label label-warning">Sell</span></a></td>';
        newTr += "<td id='xbtc " + data.xbtc + "'>" + data.xbtc + "</td>";
        newTr += "<td id='xbtc " + data.rate + "'>" + data.rate + "</td>";
        newTr += "<td id='xbtc " + data.xpkr + "'>" + data.xpkr + "</td>";
        newTr += "</tr>";
        $(".tab1 > tbody:last-child").append(newTr);
      });

      setTimeout(function() {
        sendRequest(); //this will send request again and again;
      }, 4000);
    },
  });
}

Answer 1

You need to change onclick="runfunction()" to onclick="runfunction" . Currently what's happening is that the runfunction is executed, and its return value is bound to the onclick event. You want the function itself to be bound, not its return value.

Answer 2

newTr += '<tr class="tr1"> <td onclick="runfunction()" style="text-align:center;"><a><span  class="label label-warning">Sell</span></a></td>';

move onclick to span tag

newTr += '<tr class="tr1"> <td style="text-align:center;"><a><span onclick="runfunction()"  class="label label-warning">Sell</span></a></td>';

https://codepen.io/bot_3310/pen/JajYyY

Answer 3

try to add a click function after adding a class (here I added 'td-click') to the td and remove the onclick attribute from td

$(".tab1").on("click", ".td-click", function(){
   alert("success");
})