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：我刚刚在评论中注意到您要在警报中显示全文。编辑代码以显示一种方法。

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>

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

2 个答案: