Question

当我将一个Button插入cell5按钮时，我无法单击按钮。如何在cell5中添加按钮，使其正常工作。

function addOrder()
    {

            var book = $("#book_id").val();

            var qty = $("#qty").val();

            var price = $("#unit_price").val();

            var total = $("#dts_total_price").val();

            var table=document.getElementById("results");
            var row=table.insertRow(-1);
            var cell1=row.insertCell(0);
            var cell2=row.insertCell(1);
            var cell3=row.insertCell(2);
            var cell4=row.insertCell(3);
            var cell5=row.insertCell(4);
            cell1.innerHTML=book;
            cell2.innerHTML=qty;
            cell3.innerHTML=price;
            cell4.innerHTML=total;
            cell5=document.createElement("BUTTON").innerHTML="Edit";
    }

这是我的表，该行动态生成。

产品名称数量单价总价编辑

Answer 1

尝试在jquery中使用Click事件处理程序 https://api.jquery.com/on/#on-events-selector-data-handler

$("Button").on("click", function(e) {
  console.log(e)

}）

Answer 2

您的问题尚不完全清楚。但是我认为您尝试在按钮存在之前向其添加事件监听器。您需要在创建按钮之后或期间执行此操作。

PS：请注意，您还可以传递一个命名函数而不是匿名函数。

let buttonContainer = document.getElementById('button-container');
let button = document.createElement('button');
    button.innerText = 'My Button';
    button.addEventListener( 'click', () => {
      alert('I was clicked');
    });
buttonContainer.appendChild( button );

#button-container{
  background: yellow;
}

<div id='button-container'></div>

PS：如果要将按钮放在单元格内，只需将按钮附加到该单元格而不是buttonContainer即可。

Answer 3

您可以创建按钮并将其存储在变量中。最后添加按钮。

更改：

cell5=document.createElement("BUTTON").innerHTML="Edit";

收件人：

var btn = document.createElement("button");
btn.textContent = "Edit";
btn.addEventListener("click",EditInfo); // attach event
cell5.append(btn);

function addOrder() {
  var book = $("#book_id").val();
  var qty = $("#qty").val();
  var price = $("#unit_price").val();
  var total = $("#dts_total_price").val();
  var table=document.getElementById("results");
  var row=table.insertRow(-1);
  var cell1=row.insertCell(0);
  var cell2=row.insertCell(1);
  var cell3=row.insertCell(2);
  var cell4=row.insertCell(3);
  var cell5=row.insertCell(4);
  cell1.innerHTML=book;
  cell2.innerHTML=qty;
  cell3.innerHTML=price;
  cell4.innerHTML=total;
  var btn = document.createElement("button");
  btn.textContent = "Edit";
  btn.addEventListener("click",EditInfo); // attach event
  cell5.append(btn);
}
function EditInfo(){
  alert('You have clicked the edit button');
}

table, td {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input palceholder="Book Id" id="book_id"/>
<input palceholder="" type="number" id="qty"/>
<input palceholder="Unit Price" id="unit_price"/>
<input palceholder="Total" id="dts_total_price"/>
<table id="results">
  
</table>

<button onclick="addOrder()">Ceate</button>

如何以编程方式使用javascript添加按钮

3 个答案: