2

を含む ASP.NET ページに取り組んできましたListView。ユーザーが行をクリックすると、この (一度解析された) HTML の最後の (表示されている) 列のコンテンツが ( tablejQuery によって) テキストボックスに置き換えられ、値が編集可能になります。

これまでのところ、これは Chrome の魅力のように機能しますが、IE10 では喜びではありません。

このjsfiddleでは、値が編集可能になりますが、[保存] ボタンが期待どおりに機能しません。

IE では、テキスト ボックスは表示されません。invNr面白い詳細: 4 つの変数 ( 、newInvNr、oldHtmlおよびspanWidth)をコメント アウトすると、input要素はIE10に表示されますが、もちろん操作するデータはありません。本当に本当に奇妙です。

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

メソッドが IE10 で html を正しく置き換える方法はありませhtml()んでしたが、正確な理由はわかりませんでした。私は両方の要素を表のセルに書き込み、そのうちの1つに設定して/style="display:none"を使用することになりました。これで十分です（明らかにIE10でも）。show()hide()

同じ問題が発生した場合: これは回避策であり、厳密な意味での解決策ではありません。

于 2013-06-03T14:11:47.517 に答える