Question

我有一个应用程序，其中按钮单击特定行将更新其中一列。它做得很好，除了我必须点击两次更新按钮。我相信这可能是因为我声明变量并使用它们的方式。以下是代码。

HTML

  <td><button class="UpdateBtn" onclick="EmpUpdate()">Update</button></td>

的js

  function EmpUpdate() {
$(".UpdateBtn").on('click', function () {
    var currentRow = $(this).closest("tr");
    var col1 = currentRow.find("td:eq(0)").html();
    var col2 = currentRow.find("td:eq(1)").html();
    var data = [col1, col2];

    $.ajax({
        async: true,
        url: "Home/EmpUpdate?empName=" + col1 + " &empId=" + col2,  
        cache: false,
        dataType: "json",
        success: function (data) { receiveResponse(data); }
    });
    console.log(data);
});
}

Answer 1

您必须单击两次，因为第一次单击时，您调用EmpUpdate()并且它所做的就是为将来的点击设置一个click事件处理程序。所以，第二次点击它就可以了。

只需从HTML中删除onclick，然后移除EmpUpdate()功能，并在文档准备就绪时设置点击事件。

// When the document is ready...
$(function(){
  // Set each element with a class of "UpdateBtn" up with a click event handler
  $(".UpdateBtn").on('click', function () {
    var currentRow = $(this).closest("tr");
    var col1 = currentRow.find("td:eq(0)").html();
    var col2 = currentRow.find("td:eq(1)").html();
    var data = [col1, col2];

    $.ajax({
        async: true,
        url: "Home/EmpUpdate?empName=" + col1 + " &empId=" + col2,  
        cache: false,
        dataType: "json",
        success: function (data) { receiveResponse(data); }
    });
    console.log(data);
  });
});

Answer 2

onclick事件触发了一个函数，您的函数正在等待单击。您必须删除第一行并让jquery执行此操作或删除$(".UpdateBtn").on('click'。这是一个完整的JQuery答案：

＆＃13;

$(".UpdateBtn").on('click', function () {
    var currentRow = $(this).closest("tr");
    var col1 = currentRow.find("td:eq(0)").html();
    var col2 = currentRow.find("td:eq(1)").html();
    var data = [col1, col2];

    $.ajax({
        async: true,
        url: "Home/EmpUpdate?empName=" + col1 + " &empId=" + col2,  
        cache: false,
        dataType: "json",
        success: function (data) { receiveResponse(data); }
    });
    console.log(data);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td><button class="UpdateBtn">Update</button></td>

＆＃13;

Answer 3

不包装

$（＆＃34; .UpdateBtn＆＃34;）。on（＆＃39;点击＆＃39;，function（）{}）;

在函数内部，只需将该代码放在函数外部，它就会首先注册。

＆＃13;

$(".UpdateBtn").on('click', function () {
    var currentRow = $(this).closest("tr");
    var col1 = currentRow.find("td:eq(0)").html();
    var col2 = currentRow.find("td:eq(1)").html();
    var data = [col1, col2];

    $.ajax({
        async: true,
        url: "Home/EmpUpdate?empName=" + col1 + " &empId=" + col2,  
        cache: false,
        dataType: "json",
        success: function (data) { receiveResponse(data); }
    });
    console.log(data);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td><button class="UpdateBtn">Update</button></td>

＆＃13;

按钮单击一次即可更新

3 个答案: