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

原文 标签 javascript jquery greasemonkey tampermonkey userscripts

我正在使用 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 以及一般用户脚本非常陌生。所以我很确定在这个例子中我做的很多事情都是错误的。如果您有更好的方法来实现我想要实现的目标,我会全力以赴。

最佳答案

您的逻辑中的主要问题是您正在调用 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 而不会干扰页面其余部分的代码。

关于javascript - 如何从动态创建的按钮传递参数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61461744/

相关文章:

javascript - jQuery图像预加载,相对于当前文档

javascript - 我可以将div及其内容传递到另一页吗

javascript - 如何停止 WordPress 加载 jQuery 和 jQuery-migrate?

javascript - 使用Greasemonkey删除表格

javascript - 基本的greasemonkey脚本有问题 - GM.getValue/GM.setValue(我认为)

javascript - 如何在Javascript中将项目添加到空数组

javascript - AngularJS typeahead调用webapi

javascript - 页面完全加载后获取innerHTML

jquery - context.refresh() 和/或 Waypoint.refreshAll() 不起作用?

javascript - 执行通过小书签作为脚本元素注入(inject)的 javascript?