如何传递参数以使动态行单击事件起作用

Question

我的身上有一个搜索按钮。 在此搜索按钮上单击，我将按钮单击事件称为：

$(document).ready(function() {

   //On Search Button click, this function creates dynamic tables.
   $("#searchBtn").click(function() {
        var numArray = new Array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10");
        var alphaArray = new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j");

        var table = $('<table></table>').addClass('table');

        for (i = 0; i < numArray.length; i++) {
          var tbody = $('<tbody></tbody>');
          var row = $('<tr></tr>');
          var num = numArray[i];
          var alpha = alphaArray[i];
          row.on("click", function() {
            selectRow(num, alpha);
          });

          var cell1 = $('<td></td>').addClass('spacer').text(numArray[i]);
          var cell2 = $('<td></td>');
          var button;
          if (alpha[i] == "b") {
            button = $('<button type="button">').addClass('btn btn-primary').text('BOY');
          } else if (alpha[i] == "g") {
            button = $('<button type="button">').addClass('btn btn-success').text('GIRL');
          } else if (alpha[i] == "h") {
            button = $('<button type="button">').addClass('btn btn-warning').text('HI');
          }

          cell2.append(button);
          row.append(cell1);
          row.append(cell2);
          tbody.append(row);
          table.append(tbody);
        }

        $('#searchTable').append(table);
    });

现在在单独的行上单击我正在调用一个函数selectRow（num，alpha），该函数期望两个参数为：

function selectRow(num,alpha){
            $(document).ready(function() {              
                    alert("Number and Alphabet is  "+num + alpha );
});

但是，当控件使用上述功能时，警报将始终打印两个数组的最后一条记录。

我究竟做错了什么？ 期待您的回答。

Answer 1

尝试在您的函数中传递this并使用data-*属性。

同样在您的代码中，您将为一个table创建多个tbody ，在循环之前使用以下两行，

var tbody = $('<tbody></tbody>');
tbody.append(row);

 function selectRow(ths){ alert("Number and Alphabet is "+$(ths).data('num') + $(ths).data('alpha')); }; $(function () { $("#searchBtn").click(function () { var numArray = new Array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10"); var alphaArray = new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j"); var table = $('<table></table>').addClass('table'); var tbody = $('<tbody></tbody>'); table.append(tbody); for (i = 0; i < numArray.length; i++) { var num = numArray[i]; var alpha = alphaArray[i]; var row = $('<tr data-num="'+num+'" data-alpha="'+alpha+'"></tr>'); row.on("click", function () { selectRow(this); }); var cell1 = $('<td></td>').addClass('spacer').text(numArray[i]); var cell2 = $('<td></td>'); var button; if (alpha == "b") { button = $('<button type="button">').addClass('btn btn-primary').text('BOY'); } else if (alpha == "g") { button = $('<button type="button">').addClass('btn btn-success').text('GIRL'); } else if (alpha == "h") { button = $('<button type="button">').addClass('btn btn-warning').text('HI'); } cell2.append(button); row.append(cell1); row.append(cell2); tbody.append(row); } $('#searchTable').append(table); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="searchBtn">Search</button> <div id="searchTable"></div> 

Answer 2

尝试替换这些行：

var row = $('<tr></tr>');
var num =numArray[i];
var alpha =alphaArray[i];
row.on("click", function () {
  selectRow(num, alpha);
});

使用此代码：

var num =numArray[i];
var alpha =alphaArray[i];
var row = $('<tr onclick="selectRow(' + num + ',' + alpha + ');"></tr>');