表单提交无法正常工作jquery

-1

当我点击提交按钮时，页面会刷新。然而，这个代码无处不在。表单ID是#pager。代码工作正如预期
$（“＃pager”）。submit（function（e）{
console.log（“Hi !!!”）
}）;表单提交无法正常工作jquery

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

来源

2016-06-28 Tarik Setia

看起来像这里有两个问题。首先，您需要防止默认表单行为，以便页面不会重定向。

第二个是你需要在文档准备好后实例化你的监听器。在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.preventDefaulthere。和document.readyhere。

来源

2016-06-28 18:54:52 jaybee

尝试....没有工作:( –

哦，我看到了这个问题，你还需要将你的'submit'监听器包装在'document.ready'文件中，我已经更新了我的答案 – jaybee

Thanks！！这工作 –

表单提交无法正常工作jquery

回答

相关问题