Javascript events not executing correctly

Questions
1

I have a page with html elements that have certain events binded in a javascript file.

<div class="page" data-name="mpform">
<div class="navbar">
    <div class="navbar-inner sliding">
    <div class="left">
        <a href="#" class="link back">
        <i class="icon icon-back"></i>
        <span class="ios-only">Back</span>
        </a>
    </div>
    <div class="title">About Framework7</div>
    </div>
</div>
<div class="page-content">


      <form method="post" class="list" id="pay" name="pay" >   
            <li class="item-content item-input item-input-with-info">
                <div class="item-media">
                    <i class="icon f7-icons">circle</i>
                </div>
                <div class="item-inner">
                    <div class="item-title item-label">Descripción</div>
                    <div class="item-input-wrap">
                        <input type="text" name="description" id="description" placeholder="Una Descripción" required="" validate="">
                        <span class="input-clear-button"></span>
                        <div class="item-input-info">Una Descripción para su compra</div>
                    </div>
                </div>
            </li>
            <li class="item-content item-input item-input-with-info item-input-with-error-message 
                       item-input-invalid">
                <div class="item-media">
                  <i class="icon f7-icons">circle</i>
                </div>
                <div class="item-inner">
                  <div class="item-title item-label">Monto a pagar</div>
                  <div class="item-input-wrap">
                  <input type="text" placeholder="Valor de la compra" required="" validate="" pattern="[0-9]*" 
                          data-error-message="Ingrese un valor valido!" class="input-invalid"
                          name="transaction_amount" id="transaction_amount">
                    <div class="item-input-error-message">Ingrese un valor valido!</div>
                    <span class="input-clear-button"></span>
                    <div class="item-input-info">Es el valor de tu pedido</div>
                  </div>
                </div>
            </li>
            <li class="item-content item-input item-input-with-info item-input-with-error-message 
                       item-input-invalid">
                <div class="item-media">
                  <i class="icon f7-icons">circle</i>
                </div>
                <div class="item-inner">
                  <div class="item-title item-label">Número de la tarjeta</div>
                  <div class="item-input-wrap">
                  <input type="text" placeholder="1234 7849 0974 2333" required="" validate="" pattern="[0-9]*" 
                          data-error-message="Ingrese un valor valido!" class="input-invalid"
                          data-checkout="cardNumber" id="cardNumber" 
                          onselectstart="return false" 
                          onpaste="return false" 
                          onCopy="return false" 
                          onCut="return false" 
                          onDrag="return false" 
                          onDrop="return false" 
                          autocomplete=off>
                    <div class="item-input-error-message">Ingrese un valor valido!</div>
                    <span class="input-clear-button"></span>
                    <div class="item-input-info">No guardaremos su numero de tarjeta.</div>
                  </div>
                </div>
            </li>
            <li class="item-content item-input item-input-with-info">
                <div class="item-media">
                    <i class="icon f7-icons">circle</i>
                </div>
                <div class="item-inner">
                    <div class="item-title item-label">Nombre de la tarjeta</div>
                    <div class="item-input-wrap">
                        <input type="text" id="cardholderName" data-checkout="cardholderName" 
                               placeholder="JON DOE" required="" validate="">
                        <span class="input-clear-button"></span>
                        <div class="item-input-info">El nombre que aparece en la tarjeta.</div>
                    </div>
                </div>
            </li>    
            <li class="item-content item-input item-input-with-info">
                <div class="item-media">
                    <i class="icon f7-icons">circle</i>
                </div>
                <div class="item-inner">
                    <div class="item-title item-label">Fecha de expiración</div>
                    <div class="item-input-wrap">
                        <input type="text" pattern="([0-9]{2}[/]?){2}" 
                               id="cardExpirationMonth" 
                               data-checkout="cardExpirationMonth" 
                               placeholder="MM/AA" 
                               onselectstart="return false" 
                               onpaste="return false" 
                               onCopy="return false" 
                               onCut="return false" 
                               onDrag="return false" 
                               onDrop="return false" 
                               autocomplete=off required="" validate="">
                        <span class="input-clear-button"></span>
                        <div class="item-input-info">El mes de vencimiento de la tarjeta.</div>
                    </div>
                </div>
            </li>
            <li class="item-content item-input item-input-with-info">
                <div class="item-media">
                    <i class="icon f7-icons">circle</i>
                </div>
                <div class="item-inner">
                    <div class="item-title item-label">Código de seguridad</div>
                    <div class="item-input-wrap">
                        <input type="text" pattern="([0-9]{2}[/]?){2}" 
                               id="securityCode" 
                               data-checkout="securityCode" 
                               placeholder="123" 
                               onselectstart="return false" 
                               onpaste="return false" 
                               onCopy="return false" 
                               onCut="return false" 
                               onDrag="return false" 
                               onDrop="return false" 
                               autocomplete=off required="" validate="">
                        <span class="input-clear-button"></span>
                        <div class="item-input-info">El codigo de seguridad de 3 dígitos del dorso.</div>
                    </div>
                </div>
            </li>
            <li class="item-content item-input item-input-with-value">
                <div class="item-media">
                    <i class="icon f7-icons">circle</i>
                </div>
                <div class="item-inner">
                <div class="item-title item-label">Cuotas</div>
                <div class="item-input-wrap input-dropdown-wrap">
                    <select name="installments" placeholder="Seleccione cuotas..."  id="installments" 
                            class="input-with-value">
                    </select>
                </div>
                </div>
            </li>
            <li class="item-content item-input item-input-with-value">
                <div class="item-media">
                    <i class="icon f7-icons">circle</i>
                </div>
                <div class="item-inner">
                <div class="item-title item-label">Tipo de documento</div>
                <div class="item-input-wrap input-dropdown-wrap">
                    <select placeholder="Tipo de documento..."  id="docType" 
                            data-checkout="docType" class="input-with-value">
                    </select>
                </div>
                </div>
            </li>
            <li class="item-content item-input item-input-with-info item-input-with-error-message 
                       item-input-invalid">
                <div class="item-media">
                <i class="icon f7-icons">circle</i>
                </div>
                <div class="item-inner">
                <div class="item-title item-label">Número de documento</div>
                <div class="item-input-wrap">
                <input type="text" placeholder="90833233" required="" validate="" pattern="[0-9]*" 
                        data-error-message="Ingrese un valor valido!" class="input-invalid"
                        id="docNumber" data-checkout="docNumber">
                    <div class="item-input-error-message">Ingrese un valor valido!</div>
                    <span class="input-clear-button"></span>
                    <div class="item-input-info">Tu Numero de documento.</div>
                </div>
                </div>
            </li>
            <li class="item-content item-input item-input-with-info item-input-with-error-message 
            item-input-invalid">
                <div class="item-media">
                    <i class="icon f7-icons">circle</i>
                </div>
                <div class="item-inner">
                <div class="item-title item-label">E-mail</div>
                <div class="item-input-wrap">
                    <input type="email" id="email" name="email" placeholder="[email protected]" required="" 
                           validate="" class="input-invalid">
                    <div class="item-input-error-message">Completa este campo</div>
                    <span class="input-clear-button"></span>
                    <div class="item-input-info">Un E-mail válido.</div>
                </div>
                </div>
            </li>                                   
            <input type="hidden" name="payment_method_id" id="payment_method_id"/>
            <button type="submit" class="col button button-fill color-orange">Pagar</button>
    </form>   
</div>

I loaded the following js in the index.html where I have my main view, and is as following:

window.Mercadopago.setPublishableKey("key");
window.Mercadopago.getIdentificationTypes();

function guessPaymentMethod(event) 
{
    var cardnumber = $$("#cardNumber").val()  

    if (cardnumber.length >= 6) 
    {
        var bin = cardnumber.substring(0,6);

        window.Mercadopago.getPaymentMethod(
        {
            "bin": bin
        }, 
        function(status, response)
        {
            if (status == 200) 
            {
              $$("#payment_method_id").val(response[0].id);
        
              getInstallments();
            } 
            else 
            {
                alert(`payment method info error: ${response}`);
            }
        }); 
    }
};

function getInstallments()
{
    window.Mercadopago.getInstallments(
    {
        "payment_method_id": $$("#payment_method_id").val(),
        "amount": parseFloat( $$("#transaction_amount").val() )
    }, 
    function (status, response) 
    {
        if (status == 200) 
        {
            document.getElementById('installments').options.length = 0;

            response[0].payer_costs.forEach( 
            installment => 
            {
                let opt = document.createElement('option');
                opt.text = installment.recommended_message;
                opt.value = installment.installments;

                document.getElementById('installments').appendChild(opt);
            });
        } 
        else 
        {
            alert(`installments method info error: ${response}`);
        }
    });
}    

doSubmit = false;


function doPay(event)
{
    event.preventDefault();

    if( !doSubmit )
    {
        var $form = $$("#pay");
        var formtwo = document.querySelector('#pay');

        window.Mercadopago.createToken($form, sdkResponseHandler()); //callback

        return false;
    }
};

function sdkResponseHandler(status, response) 
{
    if (status != 200 && status != 201) 
    {
        alert("verify filled data");
    }
    else
    {
      $$("#pay").append('<input name="token" type="hidden" value="' + response.id + '"/>');
      doSubmit=true;

      AjaxPago();
      form.submit();
    }
};    

function AjaxPago()
{
  var dfd = $$.Deferred();

  var url = 'http://endpoint.com';   
  data = new FormData( $$('#pay')[0] );

  $$.ajax(
  {
      url: url,
      data: data,
      enctype: 'multipart/form-data',
      headers: {APP_KEY : 'VkYp3s5v8y/B?E(H+MbQeThWmZq4t7w9'},
      mimeType:"multipart/form-data",
      contentType: false,
      cache: false,
      processData:false,
      type: 'POST',
      accept: "application/json",
      success: 
      function (data, textStatus, jqXHR)
      { 
          if( jqXHR.status == 200 )
          {                    
              console.log(textStatus);
              dfd.resolve(data);
          }
          if( jqXHR.status == 401 ) 
          {                    
              $$("#LoginErrorMessage").show();
              $$("#LoginErrorMessage").find('strong').html(data.msg);
              dfd.resolve(false);
          }
      },
      error: 
      function (data, textStatus, jqXHR)
      {
          console.log(data.responseText);
          dfd.resolve(false);
      }
  });

  return dfd.promise();   
}

I read that, I have to init the events in the page init event of f7.

$$(document).on('page:init', '.page[data-name="mpform"]', 
                function (e) 
                {
                  $$( "#cardNumber" ).keyup(
                    function() 
                    {
                      guessPaymentMethod();
                    });
                    
                  $$( "#cardNumber" ).change(
                  function() 
                  {
                    guessPaymentMethod();
                  });

                  $$("#pay").submit(
                    function(ev)
                    {
                      doPay(ev);
                    });                   
                })

But events are behaving strange, When I press a key on the text field it just fire once, and subsequent presses does not fire at all, and does not type anything in text field either.

Is this the correct way of loading JavaScript?

2
  1. Try to change $$( "#cardNumber" ).keyup( syntax to $$( "#cardNumber" ).on('keyup', (
  2. I would of course use Router Components and keep logic totally separated and scoped to the place where it belongs to https://framework7.io/docs/router-component.html
  3. Are you sure you don’t have any more elements with #cardNumber in DOM on the moment you add event listeners?
3

Thank you for the response Vlad.

I translated html to behave as a template and put the events inside the script tag of the template, and everything works fine!
Thought I had to translate everything in my js file to be there as well, but there was no need for that.