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

我正在写一个网页，它有一个按钮，当它被点击时会生成一些东西。它生成一个下拉菜单、一个文本字段和两个按钮。文本字段用于跟踪所选内容的数量，两个按钮可将值提高或降低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 here:

之所以发生这种情况，是因为您将单击事件侦听器直接附加到不存在的元素。也就是说，在document ready事件中，您将查找与

.qtyplus

和

.qtyminus

匹配的所有元素，但没有一个匹配。这将为您提供jQuery对象的空数组。然后单击处理程序会附加到该数组中的每个元素，但它是空的，因此不会附加任何单击处理程序

要使其正常工作，而不是使用

.click（）

速记，您需要使用

.on（）

，例如：

$（'table'）。在（'click'，'.qtyplus'，函数（e）{/*…*/}）上

这是因为浏览器单击事件从目标“气泡”上升到其父元素。jQuery通过将事件侦听器附加到父元素并检查冒泡到该元素的事件的目标，在（）上利用了这一点。在这种情况下，它将侦听
表中的单击事件，检查目标是否与指定的选择器匹配（例如，
.qtyplus
或
.qtyminus
），如果匹配，则调用回调。
您的类qtyplus和qtyminus实际上没有将类应用于按钮。好奇的问题：为什么不在整个过程中使用jquery？我想知道为什么现在需要使用jquery？您可以用纯js编写，它不会有太大区别。如果您需要ready（），您可以使用以下命令：@indubitalee我对JavaScript和jquery不熟悉，在我知道应该使用jquery之前，我编写了所有的JS:/。Sonia，谢谢你的链接，我一定会查出来的谢谢你，效果很好，你真是个天赐的lol