以编程方式创建的按钮的 onclick 事件未触发

Question

我正在通过 JavaScript 创建一个按钮，并尝试将其分配给一个 onclick 事件。在运行时创建了按钮，但是当我单击它时，onclick 事件没有触发。同样在 Chrome 的 Inspector 中，单击按钮时不会产生错误。

这是我的代码：

function truncator(){
      $.each($('td.rawdata-field').not(':empty'), function(i,v){
        var count = parseInt($(v).text().length);
        var maxChars = 650;
        if(count > maxChars){
          var str = $(v).text();
          var trimmed = str.substr(0, maxChars - 2);
          $(v).text(trimmed + '...');

          var btn = document.createElement('button');

          btn.setAttribute('content', 'test content');
          btn.setAttribute('class', 'show-full-text-button');
          btn.innerHTML = 'Show Full Log';

          btn.onclick = function() {
              alert("assd");
          };

          $(v).append(btn);
        }  
      });
    };

v 是父容器，在本例中是 td 元素。

这里有什么问题？

编辑： 我可以提供的另一个细节是，上面的内容在一个页面上被执行了很多次，这与它为什么不起作用有关。所有按钮都创建得很好，但是通过上述方法完成时警报不起作用。

上述代码执行时容器已经存在。

编辑 2： 我已经更新了上面的代码以包含更多正在发生的事情。函数truncator 基本上应该遍历所有td 类不为空的rawdata-field 元素，并检查其中提到的文本是否超过650 个字符。如果是，它会将文本截断为 650 个字符，然后在用户希望的情况下在此处放置一个按钮以显示完整的日志。 调用truncator时，上述函数操作的表已经存在。

Answer 1

您的代码在这里可以正常工作：https://jsfiddle.net/dusfqtr9/

  $(document).ready(function() {
    var btn = document.createElement('button');

    btn.setAttribute('content', 'test content');
    btn.setAttribute('class', 'show-full-text-button');
    btn.innerHTML = 'Show Full Log';
    btn.onclick = function() {
        alert("Hello !");
    };
    $("#container").append(btn);
  });

也许你的脚本是在父容器创建之前运行的，所以 $(v).append(btn) 什么都不做。

Answer 2

onclick 仅适用于加载脚本（包含您的 onclick 处理程序）时已存在的元素。因此，之后创建的元素不再绑定到您在加载的脚本中指定的 onclick 事件。

我不确定您的完整代码集是什么，但我猜测您的按钮可能会在脚本加载后重新生成几次。这是onclick 事件未触发的最可能原因。

因此，您想要做的是将事件处理程序“附加”到 DOM 树中的更高级别（最高级别是您的 html），您确定不会“以编程方式”重新生成，然后您d 想检查 DOM 内的相关元素是否存在。然后在找到此元素时运行您的函数。

下面是使用.on 实现此逻辑的 JQuery ：

EDIT1：我已根据您的最新评论编辑了代码。你会注意到我已经分离了处理你的按钮点击的函数。我敦促您尝试在您的原始代码集中执行此操作，您会发现 onclick 事件将始终绑定到您的按钮，无论您的按钮是何时创建的，甚至是如何创建的多次再生它们。

EDIT2：我刚刚在 cmets 中注意到您希望在警报中显示全文。编辑代码以显示一种方法。

function truncator(){
      $.each($('td.rawdata-field').not(':empty'), function(i,v){
        var origContent = $(v).text();
      	$(v).attr('orig-content',origContent);
        var count = parseInt($(v).text().length);
        var maxChars = 10;
        if(count > maxChars){
          var str = $(v).text();
          var trimmed = str.substr(0, maxChars - 2);
          $(v).text(trimmed + '...');

          var btn = document.createElement('button');

          btn.setAttribute('content', 'test-content');
          btn.setAttribute('class', 'show-full-text-button');
          btn.innerHTML = 'Show Full Log';         
          $(v).append(btn);
        }  
      });
    };

    $('html').on('click', '.show-full-text-button', function(){
      content = $(this).closest('td').attr('orig-content');
      alert(content);
    });

    truncator();

table td {
  border:1px solid black;
  padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <td class="rawdata-field"> this is a very long text </td>
  <td class="rawdata-field"> another long text </td>
  <td class="rawdata-field"> this is getting out ofhand </td>
</tr>
<tr>
  <td class="rawdata-field"> okay another longtext </td>
  <td class="rawdata-field"> more content here, and there's another one here </td>
  <td class="rawdata-field"> what am i doing here </td>
</tr>
</table>