양식 제출되지 않음 jquery

-1

제출 버튼을 클릭하면 페이지가 새로 고쳐집니다. 그러나이 코드는 어디에서나 사용할 수 있습니다. 양식 ID는 #pager입니다. 메모가 예상대로 작동하는 코드는
$ ("#pager")입니다. (0126)양식 제출되지 않음 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

시도해 봤는데 .... didnt work :( –

오, 문제가 생기면'submit' 리스너를'document.ready'에 넣어야합니다. 내 대답을 업데이트했습니다. – jaybee

고마워요 !! 그게 효과가 있었어. –

양식 제출되지 않음 jquery

답변

관련 문제