Jquery按钮onclick属性不起作用答案

【问题标题】：Jquery button onclick attribute not workingJquery按钮onclick属性不起作用
【发布时间】：2021-09-27 07:10:16
【问题描述】：

 $.get($querystudent, function(response)
    {
        tbodystudent.empty();
        console.log("Table TBODY Cleared!");
        var students = response.result;
        var $i = 0
        $.each(students, function(_,student)
        {
            $i = student.ID
            tbodystudent.append(
                $("<tr>").append(
                    $("<td>").text(student.FirstName),
                    $("<td>").text(student.MiddleName),
                    $("<td>").text(student.LastName),
                    $("<td>").text(student.CourseID),
                    $("<td>").text(student.YearLevel),
                    $("<input></input>").attr({'type':'button','class':'button is-primary is-small','id':$i, 'onclick': select($i)}).val("Select")          
                ),
            );

        });
    }, "json");

这是我当前的 Jquery 代码，它使用属性 onclick 将数据附加到 tbody 试图调用函数 select()，

    function select(x)
{
    console.log('Im Here! ', x)
}

在不点击任何按钮的情况下，控制台显示从 Onload 页面开始就已经点击了三个按钮。 Console indicates that the function is called already with no buttons being clicked

inspect 也表明onclick 属性没有添加到按钮属性中

【问题讨论】：

它应该是'onclick': `select(${$i})` 否则，您使用的是select($i) 的返回值，这是未定义的，因为您没有从该函数返回任何内容，并且您正在触发select($i)分配属性时。
David 是对的，但更好的是在.attr() 之后使用.click() 或.on('click', function(){ .. }) jQuery event handler assignment。

标签： html jquery

【解决方案1】：

根据您的想法，我已经更新并让它工作。您可以查看以下演示：

'onclick': select($i) -> 'onclick': 'select(' + $i + ')'

$("<input></input>") -> $("<button>") ：我仍在寻找$("<input>") 不起作用的原因

const students = [{
    ID: 1,
    FirstName: 'A',
    MiddleName: 'B',
    LastName: 'C',
    CourseID: 1,
    YearLevel: 1
  },
  {
    ID: 2,
    FirstName: 'A',
    MiddleName: 'B',
    LastName: 'C',
    CourseID: 1,
    YearLevel: 1
  }, {
    ID: 3,
    FirstName: 'A',
    MiddleName: 'B',
    LastName: 'C',
    CourseID: 1,
    YearLevel: 1
  }
]

function select(x) {
  console.log('Im Here! ', x)
}

$.each(students, function(_, student) {
  $i = student.ID
  $('#tbodystudent').append(
    $("<tr>").append(
      $("<td>").text(student.FirstName),
      $("<td>").text(student.MiddleName),
      $("<td>").text(student.LastName),
      $("<td>").text(student.CourseID),
      $("<td>").text(student.YearLevel),
      $("<button>").attr({
        'type': 'button',
        'class': 'button is-primary is-small',
        'id': $i,
        'onclick': 'select(' + $i + ')'
      }).text("Select")
    ),
  );

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table">
  <thead>
    <tr>
      <th scope="col">FirstName</th>
      <th scope="col">MiddleName</th>
      <th scope="col">LastName</th>
      <th scope="col">CourseID</th>
      <th scope="col">YearLevel</th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody id="tbodystudent">

  </tbody>
</table>

【讨论】：

将更改为
@MarkBryanDeGuzman 是的，你应该先让它工作，然后再找出原因。