生成されたボタンがフォームを送信します。

Question

フォーム内のテーブル内でテーブル行を生成するjavascript/jquery関数があります。テーブルには2つのボタンが含まれています。どちらのボタンもJavaScript関数を起動する必要があります（データベースを更新してボタンをテキストに変更し、もう一方はデータベースとフォームを更新する必要があります）。 代わりに、私は「偽を返す」があってもフォームを送信します。 onclickイベントで。

生成されたhtmlをコピーして実行すると、期待される結果が得られます。つまり、関数が実行され、フォームは送信されません。

フォームを送信せずにjavascript関数を発生させる生成ボタンを取得するにはどうすればよいですか？

関与HTML：

<div id="tabs-4" style="width: 97%;height: 600px;text-align: center;"> 
       <select id="selRosterList" name="selRosterList" onchange="updateRosterView()"> 
        <option value="none">Select a class</option> 
        <option value="1">1st Class Roster</option> 
       </select> 
       <div id="divShowRoster" name="divShowRoster" style="width: 100%; text-align: center; display: none;"> 
        <div style="overflow: auto; height: 300px;margin-top: 20px;"> 
        <table id="tblRoster" name="tblRoster" style="border: thin black solid;background-color: aliceblue;"> 
         <thead> 
         <th style="width: 15%;font-size: small;">Name</th> 
         <th style="width: 15%;font-size: small;">Email</th> 
         <th style="width: 10%;font-size: small;">Phone</th> 
         <th style="width: 8%;font-size: small;">PID/<br>SSN</th> 
         <th style="width: 14%;font-size: small;">Department</th> 
         <th style="width: 14%;font-size: small;">Organization</th> 
         <th style="width: 14%;font-size: small;">Supervisor Approval</th> 
         <th style="width: 8%;font-size: small;">&nbsp;</th> 
         </thead> 
         <tbody id="tbodyRoster" name="tbodyRoster"> 
         </tbody> 
        </table> 
        </div> 
        <div id="divRosterButtons" name="divRosterButtons" style="width: 100%; overflow: hidden;margin-top: 25px;"> 
         <div style="float: left; width: 50%;text-align: center;"> 
          <button class="optionbutton" style="width: 275px;">Download as Excel File</button> 
         </div> 
         <div style="float: right; width: 49%;text-align: center;"> 
          <button class="optionbutton" style="width: 275px;">Print</button> 
         </div> 
         <div style="width: 100%;text-align: center;"><button class="optionbutton" style="width: 275px;">Add Trainee</button></div> 
        </div> 
       </div> 
      </div> 

Javascriptを/ jQueryの：

function updateRosterView() { 
    if ($("#selRosterList").prop('selectedIndex') > 0) { 
     document.getElementById("divShowRoster").style.display = "block"; 
     var classId = $('#selRosterList').prop('value'); 

     $.ajax({ 
      url: 'TrainingRegistrationAjaxServlet', 
      type: 'GET', 
      data: {formType: 'getClassRoster', 
       classId: classId 
      }, 
      dataType: 'html', 
      success: function (responseText) { 
       var trHTML; 
       $.each(JSON.parse(responseText), function (key, value) { 
        var val = JSON.parse(value); 
        var supvrOk; 
        if(val.hasSupervisorOK==true){ 
         supvrOk = "Approved"; 
        }else{ 
         supvrOk = getOkButton(val.studentEmail, val.classId); 
        } 
        trHTML = '<tr>' 
         + '<td style="font-size: small;text-align: left;">' 
         + val.lastName + ", " + val.firstName 
         + '</td>' 
         + '<td style="font-size: small;text-align: left;">' 
         + val.studentEmail 
         + '</td>' 
         + '<td style="font-size: small;">' 
         + val.contactNumber 
         + '</td>' 
         + '<td style="font-size: small;">' 
         + val.tcolePID 
         + '</td>' 
         + '<td style="font-size: small;">' 
         + val.position 
         + '</td>' 
         + '<td style="font-size: small;">' 
         + val.organization 
         + '</td>' 
         + '<td style="font-size: small;">' 
         + supvrOk 
         + '</td>' 
         + '<td style="font-size: small;">' 
         + "<button id='btn" + val.studentEmail + " onclick='dropRegistrant(\"" + val.classId + "\", \"" + val.studentEmail + "\");return false;'>Drop</button>" 
         + '</td>' 
         + '</tr>'; 
        $(trHTML).appendTo($('#tbodyRoster')); 
       }) 
      }, 
      error: function (request, status, error) { 
       alert("An error occurred. Error: " + status + ", " + error); 
      } 
     }); 

    } else { 
     alert("Please select a valid class roster."); 
    } 
} 

function getOkButton(email, classId){ 
    return "<button onclick='setSupervisorOk(\"" + email + "\", \"" + classId + "\");return false;'>Set Approved</button>"; 
} 

function setSupervisorOk(email, classId){ 
    $('#btn' + email).replaceWith("<p>Approved<p>"); 
} 

Answer 1

あなたのボタンにこの属性を追加します。

<button type="button"> 

他

それが自動的にフォーム

Answer 2

ただ、デフォルトのイベントの伝播を停止（またはdivのボタン型のスタイルのようなを作るに）

$("span").click(function(event){ 
    event.stopPropagation(); 
    alert("The span element was clicked."); 
}); 

文書番号： http://www.w3schools.com/jquery/event_stoppropagation.asp