Question

我有几张这样的表：

<table id="order-table">
    <tr class="row-header">                     
        <td class="row-checkbox-delete-all"><div class="ui-icon ui-icon-trash center"></div><input tabindex="-1" id="checkbox-delete-all" type="checkbox" /></td>
        <td class="row-line"><spring:message code="createOrder.label.lineNumber.text"/></td>
        <td class="row-product-id"><spring:message code="createOrder.label.original.text"/></td>
        <td class="row-qty"><spring:message code="createOrder.label.quantity.text"/></td>
        <td class="row-description"><spring:message code="createOrder.label.description.text"/></td>
        <td class="row-abc6"><spring:message code="createOrder.label.abc6.text"/></td>
        <td class="row-abc8"><spring:message code="createOrder.label.abc8.text"/></td>
        <td class="row-upc"><spring:message code="createOrder.label.upc.text"/></td>
        <td class="row-ndc"><spring:message code="createOrder.label.ndc.text"/></td>                            
    </tr>
    <tr class="row">
        <td class="row-checkbox-delete-row"><input tabindex="-1" class="checkbox-delete-row" type="checkbox" /></td>
        <td class="row-target">10</td>
        <td class="row-product-id"><input class="id-target row-product-id" name="lineItem[0].originalInput" type="text" /></td>
        <td class="row-qty"><input class="qty-target row-qty" name="lineItem[0].quantity" type="text" value="1" /></td>
        <td class="row-description"></td>
        <td class="row-abc6"></td>
        <td class="row-abc8"><input readonly tabindex="-1" class="abc8-target row-abc8" name="lineItem[0].abc8" type="text" /></td>
        <td class="row-upc"></td>
        <td class="row-ndc"></td>
    </tr>
</table>
<table id="buttons-table-left">
    <tr>
        <td><input id="button-delete-items" type="button" title="<spring:message code="createOrder.btn.deleteItems.title"/>" /></td>
        <td><input id="button-cancel-order" type="button" title="<spring:message code="createOrder.btn.cancel.title"/>" /></td>
    </tr>
</table>
<table id="buttons-table-right">
    <tr>
        <td><input id="button-submit-order" type="submit" title="<spring:message code="createOrder.btn.submit.title"/>" /></td>
    </tr>
</table>

另一个函数是生成动态行，这些行根据从AJAX调用返回的数据添加到表中。它们具有与第一个静态行相同的结构和类名。

这样的一些jQuery / JavaScript：

$(document).ready(function() {

// Event Listeners Section

    $(document).on("click", "#button-delete-items", ajaxDeleteLine);
    $(document).on("focusout", ".id-target", ajaxGetData);

    function ajaxDeleteLine() {

        var i = 0;

        $(".checkbox-delete-row:checked").each(function() {
            i++;
            console.log(i);
        });

        $.ajax({
            type: "post",
            url: contextPath + "/deletesLineItem.do",
            data: {
                lineIds: 1
            }
        })
        .fail(function(data) {
            alert("Error: Failed to delete lines!");
        })
        .done(function(data) {
            //alert(data);
        });
    }
});

当我点击#button-delete-items时， 只会迭代日志中的第一个元素，而不是动态创建的 。我做错了什么？

Answer 1

中没有问题

 data: {
            lineIds: 1
        }

哪个总是发送1，而不是行ID？

Answer 2

我不确定你想要什么，但我的猜测是你要抓住每个选中的复选框并删除它所在的行？如果是这样，你需要这样的东西：

HTML

<table>
    <tbody>
    <tr>
        <td><input type="checkbox" class='checkbox-delete-row' name="vehicle1"/></td>
        <td>Jill</td>
        <td>Smith</td>      
        <td>50</td>
    </tr>
    <tr>
        <td><input type="checkbox" class='checkbox-delete-row' name="vehicle1"/></td>
        <td>Eve</td>
        <td>Jackson</td>        
        <td>94</td>
    </tr>
    <tr>
        <td><input type="checkbox" class='checkbox-delete-row' name="vehicle1"/></td>
        <td>John</td>
        <td>Doe</td>        
        <td>80</td>
    </tr>
    <tr>
        <td><input type="checkbox" class='checkbox-delete-row' name="vehicle1"/></td>
        <td>Adam</td>
        <td>Johnson</td>        
        <td>67</td>
    </tr>
</tbody></table>

<button id='button-delete-items'>button</button>
<button class='clone'>clone</button>

JS

(function(){

    $(document.body).on('click', '#button-delete-items', doDelete);
    $(document.body).on('click', '.clone', clone);

    // dynamically create checkboxes
    function clone(){
        $('.checkbox-delete-row:checked').each(function(){
            $('table').append($(this).attr('checked', false).parents('tr').clone());
        });
    }

    function doDelete(){
        $('.checkbox-delete-row:checked').each(function(idx, value){
            //idx is its index
            console.log(idx);
            $(this).parents('tr').remove();
        });
    }

}());

JSFFIDLE

Answer 3

您可以尝试以不同的方式编写它 - 例如

$('.checkbox-delete-row').each(function(index,element){

if($(element).is(':checked') console.log(index);

})

但你真的确定（三重检查）AJAX返回的行有相同的类吗？

行是否正确附着在桌子/桌子主体上？（我的意思是我见过的最奇怪的东西是基于错误的标记，浏览器试图自己翻译）

Answer 4

确定。在我把我的大脑震撼了好几天后，我终于和我的同事（同事们）坐下来了解我的问题是什么。

在SO的背景下很难实现，因为这里可以发布的内容范围有限。

我忘了将jquery选择器数据传递给从第一个调用的第二个函数调用。基本上我需要的数据超出了范围。

我不认为我需要这样做的原因是因为我使用了jquery on并假设它会将任何后续事件绑定到同一个事件处理程序。我错了。

通过设置var checkeditems = $(".checkbox-delete-row:checked")然后在第一个函数调用中的函数调用中将checkeditems作为参数传递，我得到了它的工作。但这让我意识到我还有另一个问题。

如果我需要序列化并通过ajax发送它，我不想通过DOM迭代来收集元连接的HTML5数据。相反，我想要做的是创建隐藏的命名输入并使用jquery选择器查找已检查的输入，然后serielize()。

感谢所有试过我帮助的人。很抱歉没问题。

动态创建的类行不通过jQuery .each（）迭代？

4 个答案: