JavaScript 使用 EventListener 和 jQuery 添加和删除

Question

对非常困惑的代码表示歉意。我对我的 $().ready(function() 和各个函数应该放置在哪里感到困惑。

什么有效:1) $(".calc").change(function() - 这会使用从数据库填充的表中选择的数据更新 span 和 div2) 当页面加载时，在调用 $(".calc").change(function() 之前，函数 addRow(e) 设法写入“hey "到控制台日志，但失败并显示 ReferenceError: Can't find variable: tbody addRow (furniture-product.php, line 396)。 一旦 $(".calc").运行change(function()，控制台日志不再起作用

什么不起作用:1) 函数addRow(e)2) 函数removeRow(e)

我确信这是在错误的位置放置了一些小东西的情况，但我尝试过移动脚本的部分内容，但没有成功。

$().ready(function () {

    "use strict";
    var tbody = document.getElementById("the-tbody");

    document.getElementById("btn-add").addEventListener("click", addRow, false);

    tbody.addEventListener("click", removeRow, false);


    var radios = $('input[type=radio]');
    radios.on('change', function () {
        radios.each(function () {
            var radio = $(this);
            radio.closest('.article-option')[radio.is(':checked') ? 'addClass' : 'removeClass']('highlight');
        });
    });


    $(".calc").change(function () {
        calctotal()

    });

});



function addRow(e) {
    console.log("hey");
    var product_id = $('input[name="product_name"]').val();
    var product_price = $('input[name="product_price"]').val();
    var row = document.createElement('tr');
    row.innerHTML = '<td><input type="hidden" name="item_id[]" value="' + product_id + '"><p>' + name + '</p><input type="hidden" name="price[]" value="' + product_price + '" class="price">&pound;<span id="amount" class="amount">0</span> <span class="remove">[x]</span></td>';
    tbody.appendChild(row);
    update_amounts();
}



function removeRow(e) {
    var elm;
    for (elm = e.target; elm !== this; elm = elm.parentNode) {
        if (/\bremove\b/.test(elm.className)) {
            removeElement(elm.parentNode);
            e.stopPropagation();
            return;
            update_amounts();
        }
    }
}

function calctotal() {
    var total = 0;

    var radios = $('input[type=radio]');

    radios.each(function () {
        var radio = $(this);
        radio.closest('.article-option')[radio.is(':checked') ? 'addClass' : 'removeClass']('highlight');

    });



    $(".calc:checked").each(function () {
        var a = this.value.split(",");
        total += parseFloat(a[0]);
        name = (a[1]);
        image = (a[2]);
        curtainid = (a[3]);
        curtaindesc = (a[4]);


        $("span.img").html('<div class="row curtain-img"><img src="images/furniture/' + image + '" class="img-responsive img-rounded" style="border: 5px solid #5f4865"></div>');


        $("div#product_name").html('<input type="hidden" name="product_name" value="' + curtainid + '">' + name + '');
        $("div#product_desc").html('' + curtaindesc + '');
        $("div#product_add").html('<input type="button" id="btn-add" value="Add">');
        $("div#product_price").html('<input type="hidden" name="product_price" value="' + total.toFixed(2) + '"><strong>&pound;' + total.toFixed(2) + '</strong>');

    });


}

HTML 很简单

<table id="myTable">

<tbody id="the-tbody"></tbody>

</table>

<input type="button" id="btn-add" value="Add">

JS fiddle :http://jsfiddle.net/pw25p3qt/

Answer 1

代码存在许多问题 - 太多，无法列出。

这是一个工作版本，删除了一些原始代码，只留下原始的添加/删除功能。

HTML

<table id="myTable" border>
    <thead>
        <tr><th>Product</th><th>Unit Price</th><th>Quantity</th><th>Total Price</th><th>Remove</th></tr>
    </thead>
    <tbody id="the-tbody"></tbody>
    <tr><td id="totalCell" colspan="5">Total: &pound;<span id="total"></span></td></tr>
</table>
<input type="button" id="btn-add" value="Add" />

Javascript

$(function() {
    "use strict";
    $("#btn-add").on('click', addRow);
    var tbody = $("#the-tbody").on('click', '.remove', removeRow);//delegate click handling to the tbody element.
    calc();

    function calc() {
        var sum = 0;
        $('tr.product').each(function() {
            var qty = Number($(this).find('.qty').text()),
                price = Number($(this).find('.price').text()),
                amount = (qty * price).toFixed(2);
            $(this).find('.amount').text(amount);
            sum += Number(amount);
        });
        $('#total').text(sum.toFixed(2));
    }
    function addRow(e) {
        $('<tr class="product"><td>Sample Product</td><td>&pound;<span class="price">1.00</span></td><td><span class="qty">1</span></td><td>&pound;<span class="amount"></span></td><td><span class="remove">[x]</span></td></tr>').appendTo(tbody);
        calc();
    }
    function removeRow(e) {
        $(this).closest("tr").remove();
        calc();
    }
});

DEMO

请注意“删除”按钮的单击操作如何委托(delegate)给 tbody 元素。这是必要的，以确保稍后添加的每个删除按钮(作为产品行的一部分)具有所需的操作，而无需单独附加单击处理程序。

另请注意，所有辅助函数 addRow()、removeRow() 和 calc() 现在都在 内部定义>$(function() {}) 结构。这可以确保诸如 tbody 之类的变量保留在作用域内(无需求助于全局作用域)。