javascript - 使用 onClick 动态构建按钮

Question

我正在 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;
};

这正在输出:

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

如您所见，报价不会正确输出，因此点击时会中断。

任何人都可以预见执行此功能或更正引用的更好方法吗？我从这个SO Answer看到DOM 不尊重引号，这就是目前导致我出现问题的原因。

亲切的问候。

Answer 1

正如我在评论中提到的，完全避免使用 onclick。 jQuery 事件处理程序更加灵活(并且支持多个事件处理程序)。

1) 将字段名(仅，而不是 jQuery 选择器)注入(inject)到 data- 属性中:

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;
};

2) 使用委托(delegate)事件处理程序以更少的开销获取对 inputButtons 的所有点击。提取字段名称并在其所属位置执行 jQuery:

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