Question

当使用jQuery将按钮插入页面时，按钮的功能在按钮创建（并注入页面）时运行，而不是在单击时按下。如何仅在单击按钮时才运行代码？

创建按钮的代码：

var buttonName = "One";
var $input = $('<input type="button" value=\'' + buttonName + '\' onclick=\'' + openSerial(buttonName)  + '\'>');
$input.appendTo("#ports");
console.log("fn: portScan: ",$input);

创建此按钮时（通过另一个页面事件），执行openSerial（）函数。

我希望openSerial仅在按下按钮时执行。这是怎么做到的？

Answer 1

当您执行openSerial(buttonName)时，您正在调用此功能。

您正在使用jQuery，请勿尝试内联值或事件处理程序。

更改

var $input = $('<input type="button" value=\'' + buttonName + '\' onclick=\'' + openSerial(buttonName)  + '\'>');

到

var $input = $('<input type="button">')
.val(buttonName)
.click(function(){ openSerial(buttonName) });

Answer 2

你正在调用该函数，因为你正在进行字符串连接：

var foo = "bar" + baz() + "qux";
                  ^^^^^---execute function, concatenate result

与

var foo = "bar baz() qux"
               ^^^^^---create string with the letters b, a, z, etc..

你需要

var $input = $('<input ..snip...] onclick=\'openSerial(' + buttonName + ')\'>');
                                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^

代替。

Answer 3

onclick基本上是存储在HTML属性中的函数体。因此，当以编程方式创建这样的东西时，您可以使用字符串将其写出来。 JS引擎将读取它并在单击时执行它。

通过不使用字符串，当您认为将其作为onclick传入时，实际上是在调用该函数。考虑一下这个位：

openSerial(buttonName)

如果你坚持当前的方法，那就需要写成：

var $input = $('<input type="button" value="' + buttonName + '" onclick="openSerial(' + buttonName + ')">');

那就是说，onclick应该不再使用，并且应该使用代码附加事件处理程序。在你的情况下更是如此，因为1）你在代码中创建了这个按钮，2）你已经在使用jQuery了。

因此，这更合适：

var buttonName = "One";
var $input = $('<input />')
    .attr('type', 'button')
    .val(buttonName)
    .on('click', function () {
        openSerial(buttonName);
        // alternatively, you could read the button name back out of the value
        // openSerial($(this).val());
    });
$input.appendTo("#ports");

我创建按钮时会运行按钮代码。为什么？

3 个答案: