在按钮事件上加载 javascript 函数答案

【问题标题】：Loading javascript function on button event在按钮事件上加载 javascript 函数
【发布时间】：2018-07-18 03:51:10
【问题描述】：

一旦按钮显示在屏幕上，我想调用 Javascript 函数。我正在寻找的类似于'onclick'属性：

<input type="button" class="button-class" onclick="function(this)">

但是，我希望在按钮显示在屏幕上时立即调用该函数，即它应该是瞬时的（按钮创建=函数调用）。我已经尝试过“onload”，但这似乎不起作用。请问有什么办法吗？

谢谢

【问题讨论】：

如果您使用 Javascript 创建按钮，只需在该代码之后调用函数即可。
@Barmar 按钮正在使用 HTML 创建，如上面的代码 sn-p 所示。
@Questionnaire 如果我使用 jquery，你介意吗
不，我不@GerardoBLANCO

标签： javascript html events button web

【解决方案1】：

在按钮元素之后放置一个调用函数的脚本元素

<input type="button" class="button-class" onclick="fn(this)" value="button" id="btn">
<script>
  function fn(obj){
     console.log(obj)
  }
  fn(document.getElementById("btn"));
</script>

【讨论】：

这是一个糟糕的解决方案，您在文档加载时运行您的函数，而不是 input 标记。如果通过js附加按钮怎么办。这行不通
@GerardoBLANCO 在评论中，提问者澄清说它是使用 HTML 而非 JS 创建的。

【解决方案2】：

@Questionnaire，你不能做你想做的事，因为一个按钮（点击事件）应该发生一个动作来执行代码。

作为一种好的做法，在页面加载完成后加载您的 Javascript 代码。这是为了避免阻塞 HTML 代码的呈现，因为 Javascript 是同步的。

    ...
    <script type="text/javascript">
        function init() {
            // Code for your button function here
        }
        window.onload = init();
    </script>
 </html>

上面的代码就差不多了。

【讨论】：

【解决方案3】：

只需在 onclick 属性中写入函数名称，而不是 function(this)，如下所示..

<script>
    function myFunc(e){
        //do something
    }
</script>
<input type="button" class="button-class" onclick="myFunc(this)">

【讨论】：

我不希望在单击按钮时执行该操作。我希望在创建按钮后立即执行操作。

【解决方案4】：

@Bartman 指出 .ready() 函数如何将其作为 document.ready 处理。

所以我想出了一个小解决方案来在创建输入按钮后运行所需的功能。修补程序但无法想象另一种解决方案

我希望这会有所帮助。如果没有，请添加评论，以便我可以编辑答案。

function clickFunc(e) {
  alert("click event");
}

function loadFunc() {
  alert("load event");
}

$("#button").click(function() {
  $("div").append("<input id=\"but\" type=\"button\" class=\"button-class\" onclick=\"clickFunc(this)\">");
  $("body").append("<script>loadFunc();<\/script>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="button" type="button">
<div></div>

【讨论】：

按钮没有ready 事件，这与$(document).ready 处理相同。
@Barmar 嗯嗯。不知道
它在您链接到的文档中：这是因为选择与 .ready() 方法的行为无关，该方法效率低下并且可能导致对该方法的错误假设行为。
@Barmar 你是 100% 正确的。我在另一个解决方案中工作
@Barmar 我能找到的最佳解决方案是在追加后添加代码