Crear dinámicamente un botón con un onClick

Question

Estoy creando dinámicamente un botón en JavaScript, esto incluirá un evento onClick. El evento onClick necesita enfocar un campo que se almacena en una variable.

No pude encontrar una manera de usar la variable de campo en sí, por lo que decidí intentar usar la propiedad field.selector del objeto JQuery, esto CONTENERÁ "".

Aquí hay un fragmento de código de la construcción tal como está.

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

Esto está generando:

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

Como puede ver, las citas no se publicarán correctamente y, por lo tanto, se rompen al hacer clic.

¿Alguien puede prever una mejor manera de realizar esta función o corregir las citas? Veo por esto SO Answer que el DOM no respeta las citas, que es lo que es actualmente causándome el problema.

Atentamente.

javascript jquery html

0

David Moores 4 sep. 2014 a las 13:44

Answer 1

Como mencioné en el comentario, evite usar onclick en absoluto. Los controladores de eventos jQuery son mucho más flexibles (y admiten múltiples controladores de eventos).

1) Inyecte el nombre del campo (solo, no el selector jQuery) en un atributo de datos:

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) Use un controlador de eventos delegado para obtener todos los clics en inputButtons con menos sobrecarga. Extraiga el nombre del campo y haga el jQuery donde pertenece:

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

1

Gone Coding 4 sep. 2014 a las 10:26

Answer 2

El siguiente ejemplo agregará dinámicamente botones:

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

0

Swetha 4 sep. 2014 a las 10:07

Answer 3

Debes crear un elemento usando jQuery. Este es un enfoque mucho más limpio y libre de errores

Un ejemplo con su código

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

1

Satpal 4 sep. 2014 a las 09:54

Crear dinámicamente un botón con un onClick

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript