提交時，為什么我的jquery處理程序無法捕獲表單？

Question

我正在制作一個Ruby Web應用程序，使用JQuery和AJAX發送/接收rcv數據。 但是，當我按Enter提交此表格時，沒有任何反應。

我應該怎么做才能提交表格。

我正在使用Foundation，這是我的模態，其中包含以下形式：

<div id="modal_paquete" class="reveal-modal large custom-modal-container" data-reveal>
  <div class="modal-header row custom-modal-header slogan-u">
    <h4 class="white-text notification-tittle">Enviar Paquete</h4>
    <a class="close-reveal-modal">&#215;</a>
  </div>

  <div class="modal-content row extra-padding-row">
      <div class="large-8 small-8 large-offset-2 small-offset-2 columns">

        <form id="paquete-form"  class="paquete-form row" method="post">

            <%= token_tag(nil) %>           
              <select class="columns" form="paquete-form"  name="agencia"required>
                <option value="">Agencia Destino</option>
            <% Agencia.find_each do |agencia| %>
              <option value="<%= agencia.id%>"><%= agencia.nombre%></option>
            <%end%> 
          </select>
            <input class="columns" type="number" min="1" step="0.01" placeholder="Ancho en cm" name="ancho" required>       
            <input class="columns" type="number" min="1" step="0.01" placeholder="Alto en cm" name="alto" required>
            <input class="columns" type="number" min="1" step="0.01" placeholder="Profundidad en cm" name="profundidad" required>
            <input class="columns" type="number" min="0.1" step="0.01" placeholder="Peso en Kg" name="peso" required>
            <input class="columns" type="number" min="1" step="0.01" placeholder="Valor en Bs" name="valor" required>
            <input class="columns" type="text" placeholder="Correo Electr&oacute;nico del Emisor" name="origen" required> 
            <input class="columns" type="text" placeholder="Correo Electr&oacute;nico del Receptor" name="destino" required> 
            <textarea class="columns" form="paquete-form" placeholder="Descripci&oacute;n" name="descripcion" required></textarea>  
            <input class="columns" type="text" placeholder="El costo de env&iacute;o es:" name="costo" disabled >

          <input class="hidden-submit-button" type="submit">
          <span class="alert round label">Presione Enter para enviar</span>

        </form>
      </div>      
  </div>
  <div class="modal-footer row notification-footer"></div>          
</div>

當我填寫完表單並按Enter后，該事件應由我的腳本處理：

$(".paquete-form").on('submit', function(event) {
    alert ("digs");
    event.preventDefault();
    event.stopImmediatePropagation();
    var constante=0;
    var porcentaje=0;

    $.ajax({
        type: 'POST',
        url: '/enterprise',
        data: {
        'empresa_id': $("meta[name='empresa']").attr("content") 
        },          
        success: function(xhr) {
            constante=xhr.constante;
            porcentaje=xhr.porcentaje;

            var ancho;
            var alto;
            var profundidad;
            var peso;
            var valor;
            ancho= $("input[name='ancho']");
            alto= $("input[name='alto']");
            profundidad= $("input[name='profundidad']");
            valor= $("input[name='valor']");
            peso= $("input[name='peso']");
            if (ancho.val()>0 && alto.val()>0 && profundidad.val()>0 && peso.val()>0 && valor.val()>0){
                $("input[name='costo']").val((ancho.val()*alto.val()*profundidad.val()*peso.val()*valor.val()/constante)+(porcentaje*valor.val()/100));
            }

        },
        fail: function(xhr, textStatus, errorThrown) {
            console.log("error")
            $('#modal_notificacion .notification-content').html(xhr.responseJSON.err_mssg);
            $('#modal_notificacion').foundation('reveal','open');
        }
    });

    $.ajax({
        type: 'POST',
        url: '/create',
        data: {
        'agencia': $(this).find("select[name='agencia']").val(), 
        'alto': $(this).find("input[name='alto']").val(), 
        'ancho': $(this).find("input[name='ancho']").val() , 
        'profundidad': $(this).find("input[name='profundidad']").val(), 
        'peso': $(this).find("input[name='peso']").val(),
        'valor': $(this).find("input[name='valor']").val(),
        'costo': $(this).find("input[name='costo']").val(),
        'emisor': $(this).find("input[name='origen']").val(),
        'receptor': $(this).find("input[name='destino']").val(),
        'descripcion': $(this).find("textarea[name='descripcion']").val()
        },          
        success: function(server_data) {
            $('#modal_notificacion .notification-content').html(server_data["success_mssg"]);
            $('#modal_notificacion').foundation('reveal','open');
        },
        error: function(xhr, textStatus, errorThrown) {
            console.log("error")
            $('#modal_notificacion .notification-content').html(xhr.responseJSON.err_mssg);
            $('#modal_notificacion').foundation('reveal','open');
        }
    });
    $('#modal_notificacion .notification-content').html('');
    $(this).trigger("reset");
});

Answer 1

正如Unamata Sanatarai所說，問題不是由於這些代碼塊而由另一個JQuery函數給出的