Question

我正在编写一个网页，其中包含一个按钮，可以在点击时生成一些内容。它会生成一个下拉菜单，一个文本字段和两个按钮。文本字段用于跟踪所选内容的数量，两个按钮将值提高或降低1.

创建元素非常简单，但将函数绑定到增加或减少值的按钮似乎不起作用。我已经看过很多例子，但是我没有看到一个与我的代码一起使用的例子。我认为问题的一部分是我通过javascript创建DOM元素而不是仅使用HTML，但我无法想象任何其他方式动态生成它们。

        window.addField = function addField(btn) {

                    var parentRow = btn.parentNode.parentNode;
                    var table = parentRow.parentNode;
                    var rowCount = table.rows.length;

                    var row = table.insertRow(rowCount);

                    var cell3 = row.insertCell(0);

                    var cell1 = row.insertCell(1);
                    var element1 = document.createElement("input");
                    element1.type = 'text';
                    element1.class = 'qty';
                    element1.id = 'quantity';
                    element1.value = 0;
                    cell1.appendChild(element1);

                    var cell2 = row.insertCell(2);
                    var element3 = document.createElement("button");
                    element3.class = 'qtyminus';
                    element3.type = "button";
                    element3.innerHTML = "+1";
                    element3.setAttribute('field', 'quantity');
                    cell2.appendChild(element3);

                    var cell4 = row.insertCell(3);
                    var element4 = document.createElement("button");
                    element4.setAttribute('field', 'quantity');
                    element4.class = 'qtyplus';
                    element4.type = "button";
                    element4.innerHTML = "-1";
                    cell4.appendChild(element4);

                    var my_form = document.createElement('form');
                    my_form.name = 'myForm';
                    my_form.method = 'post';
                    my_form.action = 'equipment_page_admin.php';




                    var element2 = document.createElement("select");
                    //element2.type = "select";
                    var option1 = document.createElement("option");
                    option1.innerHTML = "---Please Select Equipment---";
                    option1.value = "default";
                    element2.add(option1, null);
                    var option2 = document.createElement("option");
                    option2.innerHTML = "120-130 BBL Vacuum Truck (Blackiron)";
                    option2.value = "120-130 BBL Vacuum Truck (Blackiron)";

    ....

                var option151 = document.createElement('option');
                option151.innerHTML = 'Vermiculite (4-Cubic Foot Bags)';
                option151.value = 'Vermiculite (4-Cubic Foot Bags)';
                element2.add(option151, null);

                cell3.appendChild(element2);
                my_form.append(element2);


            };

jQuery(document).ready(function(){
            // This button will increment the value
            $('.qtyplus').click(function(e){
                // Stop acting like a button
                e.preventDefault();
                // Get the field name
                fieldName = $(this).attr('field');
                // Get its current value
                var currentVal = parseInt($('#'+fieldName).val());
                // If is not undefined
                if (!isNaN(currentVal)) {
                    // Increment
                    $('#'+fieldName).val(currentVal + 1);
                } else {
                    // Otherwise put a 0 there
                    $('#'+fieldName).val(0);
                }
            });
            // This button will decrement the value till 0
            $(".qtyminus").click(function(e) {
                // Stop acting like a button
                e.preventDefault();
                // Get the field name
                fieldName = $(this).attr('field');
                // Get its current value
                var currentVal = parseInt($('#'+fieldName).val());
                // If it isn't undefined or its greater than 0
                if (!isNaN(currentVal) && currentVal > 0) {
                    // Decrement one
                    $('#'+fieldName).val(currentVal - 1);
                } else {
                    // Otherwise put a 0 there
                    $('#'+fieldName).val(0);
                }
            });
        });

JSFiddle：http://jsfiddle.net/pdwv04d3/

Answer 1

这种情况正在发生，因为您将click事件侦听器直接附加到不存在的元素。也就是说，在文档就绪事件中，您正在查找与.qtyplus和.qtyminus匹配的所有元素，但没有。这为您提供了一个空的jQuery对象数组。然后单击处理程序附加到该数组中的每个元素，但它是空的，因此没有附加单击处理程序。

要实现这一点，而不是使用.click()简写，您可能希望使用.on()，例如：

$( 'table' ).on( 'click', '.qtyplus', function ( e ) { /* ... */ });

这是有效的，因为浏览器点击事件会从目标“冒泡”到其父元素。 jQuery通过将事件监听器附加到父元素并检查冒泡到该元素的事件的目标，利用.on()来利用这一点。在这种情况下，它将监听table中的点击事件，检查目标是否与指定的选择器匹配（例如，.qtyplus或.qtyminus），如果匹配，则调用回调。< / p>

在javascript上使用jQuery函数生成DOM元素

1 个答案: