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

你应该使用jQuery创建元素。这是更清洁和无错误的方法

您的代码示例

InvalidField.prototype.getMessageStructure = function(){
    var structure = 
        $('<div></div>').append(
            $('<span></span>').text(this._message)
        );
    structure.append(
        $('<button></button>')
            .addClass('inputButton')
            .text("Go To Field")
            .click(function(){
                goToFieldFromAlert($(this._field.selector));
            })
    );          
    return structure;
};

Answer 2

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

1）将fieldname（仅限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;
};

2）使用委托事件处理程序以更少的开销获取inputButtons的所有点击。提取字段名称并执行它所属的jQuery：

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

Answer 3

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

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动态构建按钮

3 个答案: