javascript - 如何从动态创建的按钮传递参数？

Question

我正在使用 tampermonkey 编写用户脚本，目的是向论坛留言板添加一个按钮，按下该按钮会使按下按钮的帖子消失。
例如，您有几个帖子:post1、post2、post3。您按下 post 1 的按钮，然后您只有 post2 和 post3。
我设法添加了按钮，但我不知道如何绑定(bind) onclick该按钮的事件到特定的<div>我想让它隐藏起来。我的逻辑是我需要向按钮传递一个参数，该参数将告诉与其相关的函数“我想要什么”。但我不明白如何将参数传递给该函数。
我有以下 DOM 结构:

<div id="post1">
    <table>
        <tr>
            <td>some text1</td>
            <td>some more text</td>
        </tr>
    </table>
</div>

<div id="post2">
    <table>
        <tr>
            <td>some text2</td>
            <td>some more text</td>
        </tr>
    </table>
</div>

<div id="post3">
    <table>
        <tr>
            <td>some text3</td>
            <td>some more text</td>
        </tr>
    </table>
</div>

<div id="post4">
    <table>
        <tr>
            <td>some text4</td>
            <td>some more text</td>
        </tr>
    </table>
</div>

当我上面提到的按钮时，我的用户脚本正在使用按钮向表中添加另一列。这是单击按钮时我要执行的功能:

function hidePost(postId){
    jQuery('#'+postId).hide();
}

这就是我添加列和按钮的方式:

function addColumn(){
    jQuery("div").each(function (index){
        let currentPostId = (jQuery(this).attr("id"));        

        let columnRow = document.createElement('td');                
        let clearButton = document.createElement('button')

        clearButton.text = "Clear Button";
        clearButton.onclick = hidePost(currentPostId) //Here is my problem. I don't know how to pass an argument to onclick method.

        
        columnRow.appendChild(clearButton);   
    
        jQuery(this).find("tr").each(function(){            
            jQuery(this).find('td').eq(1).after(columnRow.outerHTML)
        })
    });
}

只有这行不通。当我尝试将参数传递给 onclick这样，它只是在分配时执行功能。我尝试了不同的方法，例如传递字符串 clearButton.onclick ='hidePost(\"+postId+\");'我还尝试使用 jquery 注册回调，如下所示:

let clearButton = document.createElement('button')
jQuery(clearButton).click(function(){
    jQuery('#'+postId).hide();
})

但这也不起作用。
我应该指出，我是在 Tampermonkey 脚本中执行此操作的。所以也许问题就在那里。另外，我认为谨慎地说，我对 javascript 和 jquery 以及一般用户脚本非常陌生。所以我很确定在这个例子中我做的很多事情都是错误的。如果您有更好的方法来实现我想要实现的目标，我会全力以赴。

Answer 1

您的逻辑中的主要问题是您正在调用 hidePost()立即并将其未定义的返回值分配为按钮的事件处理程序。相反，您需要将其包装在匿名函数中，以便仅在单击按钮后执行:

clearButton.onclick = function() { hidePost(currentPostId); }

另外没有 text Element 对象的属性。那应该是 textContent反而。

但是值得注意的是，您的逻辑要复杂得多。如果您对所有 button 使用单个委托(delegate)事件处理程序元素，那么您需要做的就是遍历 DOM 以找到最近的父 tr并隐藏它。无需涉及 id的元素。试试这个:

(function($) {
  $('div').on('click', '.clear', function() {
    $(this).closest('div').hide();
  });

  $("div tr").append('<td><button class="clear">Clear</button></td>');
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="post1">
  <table>
    <tr>
      <td>some text1</td>
      <td>some more text</td>
    </tr>
  </table>
</div>
<div id="post2">
  <table>
    <tr>
      <td>some text2</td>
      <td>some more text</td>
    </tr>
  </table>
</div>
<div id="post3">
  <table>
    <tr>
      <td>some text3</td>
      <td>some more text</td>
    </tr>
  </table>
</div>
<div id="post4">
  <table>
    <tr>
      <td>some text4</td>
      <td>some more text</td>
    </tr>
  </table>
</div>

注意使用 IIFE 来创建一个本地范围供您使用 $变量以正常引用 jQuery 而不会干扰页面其余部分的代码。