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

Question

我正在使用 tampermonkey 编写一个用户脚本，目的是向论坛留言板添加一个按钮，按下该按钮将使按下该按钮的帖子消失。

例如，您有几个帖子:post1、post2、post3。你按下帖子 1 的按钮，然后你就只有帖子 2 和帖子 3。

我设法添加了按钮，但我不知道如何绑定(bind) onclick该按钮的事件到特定的 <div>我想让它隐藏起来。我的逻辑是，我需要向按钮传递一个参数，该参数将告诉与其绑定(bind)的函数“我想要什么”。但我不明白如何向该函数传递参数。

我有以下 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); }

此外，Element 对象没有 text 属性。应该改为 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，而不会干扰页面其余部分的代码。