Javascript 使用onClick动态构建按钮

我正在用JavaScript动态构建一个按钮，这将包括一个onClick事件。onClick事件需要关注存储在变量中的字段

我找不到使用字段变量本身的方法，因此决定尝试使用JQuery对象中的field.selector属性，该属性将包含“”

下面是当前构造的代码片段

InvalidField.prototype.getMessageStructure = function(){
    var structure = '<div class="invalidMessage"><span>' + this._message + '</span>
        <button class="inputButton" 
            Value="Go To Field" 
            onclick=\'goToFieldFromAlert($(\'' + this._field.selector + '\'))\'
        />
    </div>';
    return structure;
};

InvalidField.prototype.getMessageStructure=function（）{
var结构=''+此._消息+'
';
回报结构；
};

这是输出：

<button class="inputButton" 
    value="Go To Field" 
    onclick="goToFieldFromAlert($(" input[name="applicant.email" ]'))'="">
</button>

正如你所看到的，报价单不会正确地发出，所以点击后就会中断

谁能预见到一种更好的方式来执行这一功能，或者更正引用？从这一点上，我看到DOM不尊重引用，而这正是导致我出现问题的原因

---

问候您。

您应该使用jQuery创建元素。这是一种更干净、无错误的方法

一个代码示例

InvalidField.prototype.getMessageStructure=function（）{
变量结构=
$（''）。追加(
$（''）.text（此._消息）
);
结构.append(
$('')
.addClass（'inputButton'）
.text（“转到字段”）
。单击（函数（）{
GotoFeldFromAlert（$（this._field.selector））；
})
);          
回报结构；
};

以下示例将动态添加按钮：

hello.forEach( function(result) {
  var card = document.createElement("input");
  card.type = "button";
  card.onclick = function() {
     newcard( result );
  }
  card.value = value; // some value
  card.style.backgroundColor="#5ABC7B";
  document.body.appendChild(card);
});

---

正如我在评论中提到的，根本不要使用

onclick

。jQuery事件处理程序更加灵活（并且支持多个事件处理程序）

1） 将字段名（仅，而不是jQuery选择器）注入数据属性：

InvalidField.prototype.getMessageStructure = function(){
    var structure = '<div class="invalidMessage"><span>' + this._message + '</span>
        <button class="inputButton" 
            value="Go To Field" data-field="' + this._field.name + '"/>
    </div>';
    return structure;
};

---

在jQuery中，作为一般准则，将事件处理程序附加到元素。不要使用

onclick

属性。另外，双引号是属性

onclick=“…”

反正：）@TrueBlueAussie在onclick事件中使用双引号作为标准的问题是jquery.selector中有引号，除非使用。replace，这就开始变得更加混乱了。@Nit我无法转义包含在_field.selector属性中的引号。这个问题，再加上DOM将转义的单引号转换为双引号，导致引号在中间结束。@David Moores:正如我刚才所说。。。您根本不应该使用

onclick

。通过jQuery附加一个处理程序，您的所有问题都将得到避免。字段选择器可以作为

数据字段

属性注入，并由处理程序拾取（这是不引人注目的Ajax所做的事情）有趣的是，我对选择器之外的JQuery不太熟悉，因此我将阅读这种方法。代码对我不起作用，但我觉得这是由于我提供的摘录之外的问题。谢谢你，Satpal，我最终使用了你和TrueBlue的回复的合并。现在感觉干净多了。哦，有趣的是，我不知道我可以在按钮上附加信息。这是禁止单独点击事件的因素。在那里学到了一些非常有用的东西@David Moores:

data-

属性与jQuery插件齐头并进，并且比传递给大多数插件的通常选项对象更灵活，因此我强烈建议使用

data-

属性将额外数据输入jQuery页面。

InvalidField.prototype.getMessageStructure = function(){
    var structure = '<div class="invalidMessage"><span>' + this._message + '</span>
        <button class="inputButton" 
            value="Go To Field" data-field="' + this._field.name + '"/>
    </div>';
    return structure;
};

  $(document).on('click', '.inputButton', function() {
       var $button = $(this);
       var field = $button.data('field');
       goToFieldFromAlert('input[name="' + field + '"]');
  });