1

我的 javascript 从文件中读取文本并根据下面的按钮创建动态创建按钮。我面临的问题是它无法在点击时调用该函数。我已经尝试删除参数来调用它并且它可以工作但是我似乎无法让它与参数传递一起工作。有人可以帮我吗？

JS：

function toggleVisibility(type){
    alert(type);
}

按钮创建：

var button='<button type="button" class="btn btn-block btn-inverse active" data-toggle="button tooltip" title="Click this to enable/disable viewing of '+this+'" onclick="toggleVisibility('+"'"+this+"'"+')">'+word+'</button>';
4

4 回答 4

3

首先，您不应该使用内联处理程序，而且无论如何使用 jQuery 创建它更容易：

var that = this;
var button = $("<button>");
button.addClass("btn btn-block btn-inverse active");
button.attr({
    type: "button",
    "data-toggle": "button tooltip",
    title: "Click this to enable/disable viewing of " + that
});
button.text(word);
button.on("click", function () {
    toggleVisibility(that);
});

（是的，我知道你可以链接所有的方法调用，我只是想这样做）

当您准备好将此按钮放在某处时，只需使用$container.append(button);.

一切都取决于是什么this或您想要/期望它是什么。如果您需要传递给的参数toggleVisibility是刚刚单击的特定按钮（我猜是切换其可见性），只需传递this（忽略that）。至于设置title属性，我不确定你想要什么:)

如果您有一个 HTML 结构，例如：

<div id="container">
    <!-- Buttons go somewhere in here -->
</div>

并且您将按钮附加到该容器（或该容器中的某处），click使用事件委托将单个处理程序绑定到容器会更有效：

$("#container").on("click", ".special-btn-identifier", function () {
    toggleVisibility(this);
});

当然，您需要向按钮添加一个“special-btn-identifier”类，以便此事件处理程序能够工作（并删除click每个按钮的单独处理程序，因为这将覆盖它们）。这个单一的事件处理程序只需要运行一次，最好是一旦#container准备好......就像在$(document).ready(function () {});.

于 2013-04-04T21:32:53.853 回答
0

替换您的以下行：

.. onclick="toggleVisibility('+"'"+this+"'"+')">'+word+'</button>';

对于这个：

.. onclick="toggleVisibility(this)">'+word+'</button>';

因为您不需要转义this关键字，也不需要包含与this您创建按钮文本的上下文不同的内容。

于 2013-04-04T21:32:42.133 回答
0

创建按钮时，在文档而不是 html 中注册 onClick 事件。

$(document).on('click', 'button.btn-inverse', function() { toggleVisibility(this); return false;});
于 2013-04-04T21:33:00.210 回答
0

不要创建内联 HTML 字符串，不要使用侵入式 Javascript。

虽然我什至不建议您使用 vanilla jQuery 创建它们，但您可以尝试：

var $button = $('<button></button>', {
  'text'        : word
  'type'        : 'button',
  'class'       : 'btn btn-block btn-inverse active',
  'data-toggle' : 'button tooltip',
  ...
  // any other attributes
});

// append the $button anywere

$( someContainer ).append($button);

$( someContainer ).on('click', '.btn', function(event){

  // you can refer to the button with $(this) here

});
于 2013-04-04T21:37:59.447 回答