动态添加的表行不删除

Question

So I have some javascript/jquery written to dynamically add and remove table rows from a fieldset. My function works just fine for pre-existing table rows (they can be removed properly). However, after adding a new table row I cannot delete the new item until I delete a pre-existing row. I'm guessing this has something to do with how event binding works in javascript/jquery (ie the click function is not bound to the new elements until an event is fired and the bind is rerun). However, I haven't been able to find any resources regarding this issue in my extensive searching and thus have no idea how to fix it.

Please see the following jsfiddle (press the '+' to add a new table row and '-' to delete it):

https://jsfiddle.net/znwL8x0j/

HTML:

<fieldset class="dedupe-rate">
    <legend>Workloads</legend>
    <table id="workloads">
        <tr>
            <th>
                +/-
            </th>
            <th>
                Name
            </th>
            <th>
                Type
            </th>
            <th>
                %
            </th>
            <th>
                Ratio
            </th>
        </tr>
        <tr id="workload-1">
            <td class="remove-workload">
                -
            </td>
            <td>
                <input type="text" class="workload-name" id="name-w1" name="name-w1" value="Virtual Desktop" size="20">
            </td>
            <td>
                <select class="workload-type" id="type-w1" name="type-w1">
                    <option value="VDI" selected>VDI</option>
                    <option value="VSI">VSI</option>
                    <option value="Email">Email</option>
                    <option value="Analytics">Analytics</option>
                    <option value="OLTP">OLTP</option>
                    <option value="DW">DW</option>
                    <option value="Compression">Compression</option>
                    <option value="Other">Other</option>
                </select>
            </td>
            <td>
                <input type="text" class="workload-percent" id="percent-w1" name="percent-w1" value="25" size="1">%
            </td>
            <td>
                <select class="workload-ratio" id="ratio-w1" name="ratio-w1">
                    <option value="7">7:1</option>
                    <option value="8">8:1</option>
                    <option value="9">9:1</option>
                    <option value="10" selected>10:1</option>
                    <option value="11">11:1</option>
                    <option value="12">12:1</option>
                </select>
            </td>
        </tr>
        <tr id="workload-2">
            <td class="remove-workload">
                -
            </td>
            <td>
                <input type="text" class="workload-name" id="name-w2" name="name-w2" value="Virtual Server" size="20">
            </td>
            <td>
                <select class="workload-type" id="type-w2" name="type-w2">
                    <option value="VDI">VDI</option>
                    <option value="VSI" selected>VSI</option>
                    <option value="Email">Email</option>
                    <option value="Analytics">Analytics</option>
                    <option value="OLTP">OLTP</option>
                    <option value="DW">DW</option>
                    <option value="Compression">Compression</option>
                    <option value="Other">Other</option>
                </select>
            </td>
            <td>
                <input type="text" name="percent-w2" class="workload-percent" id="percent-w2" value="15" size="1">%
            </td>
            <td>
                <select class="workload-ratio" id="ratio-w2" name="ratio-w2">
                    <option value="5">5:1</option>
                    <option value="6">6:1</option>
                    <option value="7" selected>7:1</option>
                    <option value="8">8:1</option>
                </select>
            </td>
        </tr>
        <tr id="workload-3">
            <td class="remove-workload">
                -
            </td>
            <td>
                <input type="text" class="workload-name" id="name-w3" name="name-w3" value="Email" size="20">
            </td>
            <td>
                <select class="workload-type" id="type-w3" name="type-w3">
                    <option value="VDI">VDI</option>
                    <option value="VSI">VSI</option>
                    <option value="Email" selected>Email</option>
                    <option value="Analytics">Analytics</option>
                    <option value="OLTP">OLTP</option>
                    <option value="DW">DW</option>
                    <option value="Compression">Compression</option>
                    <option value="Other">Other</option>
                </select>
            </td>
            <td>
                <input type="text" name="percent-w3" class="workload-percent" id="percent-w3" value="15" size="1">%
            </td>
            <td>
                <select class="workload-ratio" id="ratio-w3" name="ratio-w3">
                    <option value="4">4:1</option>
                    <option value="5" selected>5:1</option>
                    <option value="6">6:1</option>
                </select>
            </td>
        </tr>
        <tr id="workload-4">
            <td class="remove-workload">
                -
            </td>
            <td>
                <input type="text" class="workload-name" id="name-w4" name="name-w4" value="Analytics" size="20">
            </td>
            <td>
                <select class="workload-type" id="type-w4" name="type-w4">
                    <option value="VDI">VDI</option>
                    <option value="VSI">VSI</option>
                    <option value="Email">Email</option>
                    <option value="Analytics" selected>Analytics</option>
                    <option value="OLTP">OLTP</option>
                    <option value="DW">DW</option>
                    <option value="Compression">Compression</option>
                    <option value="Other">Other</option>
                </select>
            </td>
            <td>
                <input type="text" name="percent-w4" class="workload-percent" id="percent-w4" value="15" size="1">%
            </td>
            <td>
                <select class="workload-ratio" id="ratio-w4" name="ratio-w4">
                    <option value="3">3:1</option>
                    <option value="4" selected>4:1</option>
                </select>
            </td>
        </tr>
        <tr id="workload-5">
            <td class="remove-workload">
                -
            </td>
            <td>
                <input type="text" class="workload-name" id="name-w5" name="name-w5" value="Online Transaction Processing" size="20">
            </td>
            <td>
                <select class="workload-type" id="type-w5" name="type-w5">
                    <option value="VDI">VDI</option>
                    <option value="VSI">VSI</option>
                    <option value="Email">Email</option>
                    <option value="Analytics">Analytics</option>
                    <option value="OLTP" selected>OLTP</option>
                    <option value="DW">DW</option>
                    <option value="Compression">Compression</option>
                    <option value="Other">Other</option>
                </select>
            </td>
            <td>
                <input type="text" name="percent-w5" class="workload-percent" id="percent-w5" value="10" size="1">%
            </td>
            <td>
                <select class="workload-ratio" id="ratio-w5" name="ratio-w5">
                    <option value="3">3:1</option>
                    <option value="4" selected>4:1</option>
                </select>
            </td>
        </tr>
        <tr id="workload-6">
            <td class="remove-workload">
                -
            </td>
            <td>
                <input type="text" class="workload-name" id="name-w6" name="name-w6" value="Data Warehousing" size="20">
            </td>
            <td>
                <select class="workload-type" id="type-w6" name="type-w6">
                    <option value="VDI">VDI</option>
                    <option value="VSI">VSI</option>
                    <option value="Email">Email</option>
                    <option value="Analytics">Analytics</option>
                    <option value="OLTP">OLTP</option>
                    <option value="DW" selected>DW</option>
                    <option value="Compression">Compression</option>
                    <option value="Other">Other</option>
                </select>
            </td>
            <td>
                <input type="text" name="percent-w6" class="workload-percent" id="percent-w6" value="10" size="1">%
            </td>
            <td>
                <select class="workload-ratio" id="ratio-w6" name="ratio-w6">
                    <option value="2">2:1</option>
                    <option value="3" selected>3:1</option>
                    <option value="4">4:1</option>
                </select>
            </td>
        </tr>
        <tr id="workload-7">
            <td class="remove-workload">
                -
            </td>
            <td>
                <input type="text" class="workload-name" id="name-w7" name="name-w7" value="Media Compression" size="20">
            </td>
            <td>
                <select class="workload-type" id="type-w7" name="type-w7">
                    <option value="VDI">VDI</option>
                    <option value="VSI">VSI</option>
                    <option value="Email">Email</option>
                    <option value="Analytics">Analytics</option>
                    <option value="OLTP">OLTP</option>
                    <option value="DW">DW</option>
                    <option value="Compression" selected>Compression</option>
                    <option value="Other">Other</option>
                </select>
            </td>
            <td>
                <input type="text" name="percent-w7" class="workload-percent" id="percent-w7" value="5" size="1">%
            </td>
            <td>
                <select class="workload-ratio" id="ratio-w7" class="ratio-w7">
                    <option value="1.2">1.2:1</option>
                    <option value="1.3">1.3:1</option>
                    <option value="1.4" selected>1.4:1</option>
                    <option value="1.5">1.5:1</option>
                </select>
            </td>
        </tr>
        <tr id="workload-8">
            <td class="remove-workload">
                -
            </td>
            <td>
                <input type="text" class="workload-name" id="name-w8" name="name-w8" value="Other" size="20">
            </td>
            <td>
                <select class="workload-type" id="type-w8" name="type-w8">
                    <option value="VDI">VDI</option>
                    <option value="VSI">VSI</option>
                    <option value="Email">Email</option>
                    <option value="Analytics">Analytics</option>
                    <option value="OLTP">OLTP</option>
                    <option value="DW">DW</option>
                    <option value="Compression">Compression</option>
                    <option value="Other" selected>Other</option>
                </select>
            </td>
            <td>
                <input type="text" name="percent-w8" class="workload-percent" id="percent-w8" value="5" size="1">%
            </td>
            <td>
                <input type="text" class="workload-ratio" id="ratio-w8" name="ratio-w8" value="3" size="1" style="text-align: right">:1
            </td>
        </tr>
        <tr id="add-workload">
            <td class="add-workload">
                +
            </td>
        </tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr class="totals">
            <td></td>
            <td></td>
            <td>
                Total:
            </td>
            <td>
                <p id="total-percent"></p>
            </td>
            <td>
                <p id="average-ratio"></p>
            </td>
        </tr>
    </table>
</fieldset>

CSS

fieldset {
    margin: 0 auto 20px;
}

.dedupe-rate {
    width: 440px;
}

.add-workload, .remove-workload {
    cursor: pointer;
    color: #A8A8A8;
}

.add-workload:hover, .remove-workload:hover {
    color: #000000;
    font-weight: 800;
    background-color: #A8A8A8;
}

Javascript/jQuery:

function workload_totals_update(toUpdate) {
    var totalPercent = 0;
    $(".workload-percent").each(function() {
        totalPercent += parseInt($(this).val());
    });

    var averageRatio = 0;
    $(".workload-ratio").each(function() {
        averageRatio += parseInt($(this).val())*$(this).closest("tr").find(".workload-percent").val()*0.01;
    });


    $("#total-percent").text(totalPercent.toString() + "%");
    if (totalPercent == 100) {
        $("#total-percent").css("color", "#00AA00");
    }
    else {
        $("#total-percent").css("color", "#FF0000");
    }
    $("#average-ratio").text(averageRatio.toFixed(2) + ":1");
}

$(document).ready(function(){
    workload_totals_update();

    $(".workload-ratio").bind("change", function(){workload_totals_update()});
    $(".workload-ratio").bind("keyup", function(){workload_totals_update()});
    $(".workload-percent").bind("keyup", function(){workload_totals_update()});
    //Add/Remove Workloads
    $(".remove-workload").click(function() {
        var currRow = $(this).closest("tr");
        var nextRow = $(this).closest("tr").next("tr");

        while (nextRow.attr("id") != "add-workload") {

            var prevName = currRow.find(".workload-name");
            var nextName = nextRow.find(".workload-name");
            prevName.attr("id", nextName.attr("id"));
            prevName.attr("name", nextName.attr("name"));
            prevName.val(nextName.val());

            var prevType = currRow.find(".workload-type");
            var nextType = nextRow.find(".workload-type");
            prevType.attr("id", nextType.attr("id"));
            prevType.attr("name", nextType.attr("name"));
            prevType.val(nextType.val());

            var prevPercent = currRow.find(".workload-percent");
            var nextPercent = nextRow.find(".workload-percent");
            prevPercent.attr("id", nextPercent.attr("id"));
            prevPercent.attr("name", nextPercent.attr("name"));
            prevPercent.val(nextPercent.val());

            var prevRatio = currRow.find(".workload-ratio");
            var nextRatio = nextRow.find(".workload-ratio");
            prevRatio.attr("id", nextRatio.attr("id"));
            prevRatio.attr("name", nextRatio.attr("name"));
            prevRatio.val(nextRatio.val());

            currRow = nextRow;
            nextRow = nextRow.next("tr");
        }

        currRow.remove();

    });

    $(".add-workload").click(function() {
        var workloadCount = $("#workloads tr").length - 7;
        var workloadNum = "w" + (workloadCount + 1).toString();
        var trId = "workload-" + (workloadCount+1).toString();
        var name = "name-" + workloadNum;
        var type = "type-" + workloadNum;
        var percent = "percent-" + workloadNum;
        var ratio = "ratio-" + workloadNum;

        var removeWorkload = '<td class="remove-workload">-</td>'
        var workloadName = '<td><input type="text" class="workload-name" id="'+name+'" name="'+name+'" value="Other" size="20"></td>';
        var workloadType = '<td><select class="workload-type" id="'+type+'" name="'+type+'"><option value="VDI">VDI</option><option value="VSI">VSI</option><option value="Email">Email</option><option value="Analytics">Analytics</option><option value="OLTP">OLTP</option><option value="DW">DW</option><option value="Compression">Compression</option><option value="Other" selected>Other</option></select>';
        var workloadPercent = '<td><input type="text" name="'+percent+'" class="workload-percent" id="'+percent+'" value="0" size="1">%</td>';
        var workloadRatio = '<td><input type="text" class="workload-ratio" id="'+ratio+'" name="'+ratio+'" value="3" size="1" style="text-align: right">:1</td>';

        $(this).closest("tr").prev("tr").after('<tr id="' + trId + '">' + removeWorkload + workloadName + workloadType + workloadPercent + workloadRatio + '</tr>');
    });
});

Answer 1

Hi brother try to change :

$(".remove-workload").click(function() {

By :

$('body').on('click',".remove-workload",function() {

That should work.