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

Question

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

例如，您有几个 post：post1、post2、post3。您按下 post 1 的按钮，然后您只有 post2 和 post3.

我设法添加了按钮，但我不知道如何将该按钮的 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>

我的用户脚本在 table 中添加了另一列，当我上面提到的按钮时有一个按钮。这是单击按钮时我要执行的功能：

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() 并将其未定义的 return 值指定为按钮的事件处理程序。相反，您需要将它包装在一个匿名函数中，以便它仅在在单击按钮后执行：

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

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

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

How to pass argument from a dynamically created button?

javascript

jquery

greasemonkey

tampermonkey

userscripts