Question

当我点击提交按钮时，页面才会刷新。但是这个代码无处不在。表单ID是#pager。按预期工作的代码是
$（＆＃34;＃pager＆＃34;）。submit（function（e）{
的console.log（＆＃34;您好!!!＆＃34）
}）;

<!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>

Answer 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 here的更多信息。并document.ready here。

表单提交不工作jquery

1 个答案: