如何从一个动态创建的按钮中传递参数？

Question

我正在用tampermonkey编写一个用户脚本，目的是在论坛留言板上添加一个按钮，当按下按钮时，按钮所在的帖子会消失。

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

我成功地添加了按钮，但我不知道如何把这个按钮与 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 colomnRow = 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.


        colomnRow.appendChild(clearButton);   

        jQuery(this).find("tr").each(function(){            
            jQuery(this).find('td').eq(1).after(colomnRow.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 元素对象的属性。这应该是 textContent 而不是。

然而值得注意的是，你的逻辑是 好多 更加复杂。如果你使用一个单一的委托事件处理程序来处理所有的 button 元素，那么你需要做的就是遍历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，而不影响页面其他部分的代码。