动态构建onClick按钮

我在JavaScript中动态构建了一个按钮，这将包含一个onClick事件。 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不尊重当前导致我问题的引用。

亲切的问候。

来源

2014-09-04 David Moores

只需转义引号？ – Nit 2014-09-04 09:46:11

在jQuery中，作为一般准则，将事件处理程序附加到元素。不要使用'onclick'属性。对于属性'onclick =“...”''无论如何，双引号也是标准的:) – 2014-09-04 09:49:21

@TrueBlueAussie在onclick事件中使用双引号作为标准的问题在于jquery.selector在其中引用了引号，除非我使用.replace，否则它就会逃跑，然后开始变得更加混乱。 – 2014-09-04 10:13:54

正如我在评论中提到，应避免使用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; 
};

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

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

来源

2014-09-04 10:26:42

哦，有趣的是，我不知道我可以将信息附加到按钮本身。这是禁止单独点击事件的因素。学到了非常有用的东西！ – 2014-09-04 13:15:54

@David Moores：'data-'属性与jQuery插件紧密相关，并且比通常的* options *对象更加灵活，因此我强烈建议使用'data-'属性来获取额外的数据到页面为jQuery。 – 2014-09-04 13:17:05

您应该使用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; 
};

来源

2014-09-04 09:54:46 Satpal

有趣的是，我不熟悉选择器之外的JQuery，所以我会阅读这种方法。代码不适合我，但我觉得这是由于我提供的摘录以外的事情。 – 2014-09-04 10:36:26

谢谢Satpal，我最终使用了你和TrueBlue的反应。现在感觉更清洁了。 – 2014-09-04 13:27:29

下面的例子将动态地添加按钮的一个例子：

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

来源

2014-09-04 10:07:42 Swetha

动态构建onClick按钮

回答

相关问题