2

我一直在处理一个包含ListView. 当用户单击一行时，此（一旦解析）HTML 的最后（可见）列的内容将table替换为文本框（通过 jQuery），从而使值可编辑。

到目前为止，这在 Chrome 中就像一个魅力，但在 IE10 中没有乐趣。

在此 jsfiddle中，该值变为可编辑，但随后 Save 按钮无法按预期工作。

在 IE 中，文本框不会出现。有趣的细节：如果我注释掉四个变量（invNr、newInvNr和），该元素确实oldHtml会出现在 IE10 中，但我当然没有数据可以使用。真的很奇怪。spanWidthinput

jQuery：

$(document).ready(function () {
    $('tr[id*="itemRow"]').click(function () {
        $clickedRow = $(this);

        //this makes sure the input field isn't emptied when clicked again
        if ($clickedRow.find('input[id$="editInvNr"]').length > 0) {
            return;
        }

        var invNr = $clickedRow.find('span[id$="InvoiceNumber"]').text(),
            newInvNr = '',
            oldHtml = $clickedRow.find('span[id$="InvoiceNumber"]').html(),
            spanWidth = $clickedRow.find('span[id$="InvoiceNumber"]').width();

        $clickedRow.find('span[id$="InvoiceNumber"]').parent('td').html('<input type="text" ID="editInvNr"></input>');
        $clickedRow.find('input[id="editInvNr"]').val(invNr).focus().on('input propertychange', function () {
            $clickedRow.find('span[id$="SaveResultMsg"]').hide();
            $clickedRow.find('td[id$="SaveOption"]').show();
            $clickedRow.find('input[id*="btnSaveInvNrFormat"]').show();
            newInvNr = $(this).val();
            if (newInvNr == $clickedRow.find('span[id$="InvoiceNumber"]').text()) {
                $clickedRow.find('td[id$="SaveOption"]').hide();
            }
        });
    });

    $('tr[id*="itemRow"]').focusout(function () {
        $rowLosingFocus = $(this);
        var previousValue = $rowLosingFocus.find('input[id$="editInvNr"]').val();
        $rowLosingFocus.find('input[id$="editInvNr"]').closest('td').html('<asp:Label ID="lblInvoiceNumber" runat="server" />');
        $rowLosingFocus.find('span[id$="InvoiceNumber"]').text(previousValue);
    });
});

function UpdateInvoiceNrFormat(leButton) {
    $buttonClicked = $(leButton);
    $buttonClicked.focus();

    var companyName = $buttonClicked.closest('tr').find('span[id$="lblCompanyName"]').text(),
        invoiceType = $buttonClicked.closest('tr').find('span[id$="lblInvoiceType"]').text(),
        invNrFormat = $buttonClicked.closest('tr').find('span[id$="lblInvoiceNumber"]').text();

    PageMethods.UpdateInvoiceNumberFormat(companyName, invoiceType, invNrFormat, onSuccess, onError);
    function onSuccess(result) {
        $buttonClicked.hide();
        $buttonClicked.siblings('span[id$="SaveResultMsg"]').text(result).show();
    }
    function onError(result) {
        $buttonClicked.hide();
        $buttonClicked.siblings('span[id$="SaveResultMsg"]').text('Error:' + result).show();
    }
}

我尝试了 jQuery 语句的各种组合，链接和避免链接，按照某人的建议将其放在页面底部，出于绝望而注释掉代码的各个部分。还是纳达。

4

1 回答 1

0

没有办法让该html()方法在 IE10 中正确替换 html，尽管我从来没有找到确切的原因。我最终将这两个元素写入表格单元格，style="display:none"为其中一个设置并使用show()/hide()这对我来说已经足够了（显然对于 IE10 也是如此）。

对于遇到相同问题的任何人：这是一种解决方法，而不是最严格意义上的解决方案。

于 2013-06-03T14:11:47.517 回答