生成的按鈕觸發表單提交

Question

我有一個javascript / jquery函數，可以在表單內的表格內生成表格行。 表格中包含兩個按鈕。 兩個按鈕都應觸發javascript函數（一個更新數據庫並將按鈕更改為文本，另一個應更新數據庫和表單），但不提交表單。 相反，即使我有“ return false”，它也會觸發表單提交。 在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