Форма отправки не работает jquery

Когда я нажимаю кнопку "Отправить", страница обновляется. Однако этот код работает везде. Идентификатор формы - #pager. Код, который работает, как и ожидалось,
$("# Пейджера"). Представить (функция (е) {
console.log ("Привет!!!")
});

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
  <style>
      </style>

</head>
<body>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
<script>
    // The Edit and 
    function actionFormatter(value, row, index) {
        return [
            '<a class="edit ml10" href="javascript:void(0)" title="Edit">',
            '<i class="glyphicon glyphicon-edit"></i>',
            '</a>',
            '<a class="remove ml10" href="javascript:void(0)" title="Remove">',
            '<i class="glyphicon glyphicon-remove"></i>',
            '</a>'
        ].join(' ');
    }


    $.ajax({
                type:"GET",
                crossDomain: true,
                beforeSend: function (request)
                {
                    request.setRequestHeader("Content-Type", "application/json");
                },
                url: "http://localhost:5000/api/members/",
                processData: false,
                success: function(msg) {
                    console.log(msg);
                     $('#memberTable').bootstrapTable({
                         data: msg
                    });
                }
        });

    $(function () {

        $('#memberTable').on('all.bs.table', function (e, name, args) {
            console.log(args);
        })
         .on('check.bs.table', function (e, row) {
            console.log(row);
        })

    });

    window.actionEvents = {

        'click .edit': function (e, value, row, index) {
            console.log(row);
        },
        'click .remove': function (e, value, row, index) {
            console.log(row);
        }

    };


 $("#pager").submit(function(e){
     console.log("Hi!!!")
 });
</script>
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <h2>Member Data</h2>
            <p>
                <br>
                <table id="memberTable" data-search="true"
                     >
                    <thead>
                    <tr>
                        <th data-field="state" data-checkbox="true"></th>
                        <th data-field="name" data-sortable="true" >Name</th>
                        <th data-field="phone">Phone</th>
                        <th data-field="date" data-sortable="true">Date</th>
                        <th data-field="action" data-formatter="actionFormatter" data-events="actionEvents">Action</th>
                    </tr>
                    </thead>
                </table>
            </p>
            <br>
        </div></div>
        <div class="row">
            <div class="col-sm-12">
            <form id = "pager">

                    <textarea class="form-control" rows="3" id="textArea"></textarea>
                    <span class="help-block"></span>
                    <button type="submit" id="sendButton" class="form-control btn btn-primary">Send</button>

            </form>
              </div>  

</div></div>

</body>
</html>
Источник

1 ответ

Решение

Похоже, здесь есть две проблемы. Во-первых, вам нужно предотвратить поведение формы по умолчанию, чтобы страница не перенаправляла.

Во-вторых, вам нужно создать экземпляр вашего слушателя после того, как документ будет готов. В тот момент, когда ваш слушатель будет добавлен до того, как DOM будет готов, он фактически никогда не будет запущен. Это должно решить обе проблемы.

$(function() {
  $("#pager").submit(function(e) {
    e.preventDefault();
    console.log("Hi!!!")
  });

  // You should probably put the rest of your Javascript in here too, so it doesn't run until the DOM is fully ready.
});

Вы можете прочитать больше о event.preventDefault здесь А также document.ready здесь

Источник
Другие вопросы по тегам