动态生成的按钮无法通过 jQuery

Question

在 AJAX 的帮助下创建和获取表格和表格中的按钮。

带来的表中的按钮不起作用。我看不到与控制台上的按钮单击相关的任何操作。按钮不起作用的原因可能是什么？

按钮创建的代码结构：

for (var i = 0; i < finishedExams.length; i++) {
  document.getElementById('FEtemplate').innerHTML += '<tr><th>' + (i + 1) + '</th><td>' + result + '</td><td>' + title + '</td><td>' + et + '</td><td>' + humanized_time_span(date) + '</td><td><button type="button" class="btn btn-sm btn-alt-primary sendButtonData" data-qr-exam-id="' + id + '"> Send</button></div></td></tr>';
}

按钮点击相关的代码结构：

$('.sendButtonData').click(function () { 
        /* AJAX POST code here.. */
        if (response.status == true) {
            /* some codes */
        } else {
            /* some codes */
        }
    });

我尝试了什么？

$('body').on('click', '.sendButtonData', function(){

此代码有效，但使用表格第一部分的 ID 获取它。所有其他按钮的行为就像它们在表格的第一行工作一样。

另外，我将按钮类型从“按钮”更改为“提交”。同样，没有任何改变。

Answer 1

我认为您在创建这些按钮之前已将事件侦听器附加到 ".sendButtonData" 元素，当您单击其中一个时没有任何反应，因为事件已附加到具有该类名称的现有元素，在这种情况下没有，但是不适合未来的人

$('.sendButtonData').click(function () { 
  console.log("button click!");
});

for (var i = 0; i < 5; i++) {
  document.getElementById('FEtemplate').innerHTML += '<tr><th>' + (i + 1) + '</th><td>' + " some result " + '</td><td>' + " some title " + '</td><td>' + " some et " + '</td><td>' + " some date " + '</td><td><button type="button" class="btn btn-sm btn-alt-primary sendButtonData" data-qr-exam-id="' + " some id " + '"> Send</button></div></td></tr>';
}

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

所以你需要在创建像这样的按钮之后附加那个监听器

for (var i = 0; i < 5; i++) {
  document.getElementById('FEtemplate').innerHTML += '<tr><th>' + (i + 1) + '</th><td>' + " some result " + '</td><td>' + " some title " + '</td><td>' + " some et " + '</td><td>' + " some date " + '</td><td><button type="button" class="btn btn-sm btn-alt-primary sendButtonData" data-qr-exam-id="' + " some id " + '"> Send</button></div></td></tr>';
}

$('.sendButtonData').click(function () { 
  console.log("button click!");
});

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

或者你可以像这样使用事件委托

$('#FEtemplate').click(function(e) { 
  // only if the element has that class `sendButtonData`
  // note that in this case we're not checking for the element type to be a button
  if(e.target.className.includes("sendButtonData")) {
    console.log("button click!");
  }
});

for (var i = 0; i < 5; i++) {
  document.getElementById('FEtemplate').innerHTML += '<tr><th>' + (i + 1) + '</th><td>' + " some result " + '</td><td>' + " some title " + '</td><td>' + " some et " + '</td><td>' + " some date " + '</td><td><button type="button" class="btn btn-sm btn-alt-primary sendButtonData" data-qr-exam-id="' + " some id " + '"> Send</button></div></td></tr>';
}

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