浏览器窗口在检查器中显示正确的值，但在文档中无效

Question

我正在使用 jquery 动态生成输入框，然后将其嵌入到文档中。我遇到的问题是，虽然检查器中显示了正确的值，但浏览器显示的值无效。

为了更清楚，这是图像：

你可以在检查器中看到 <input name="txtTblAmount" class="num" style="width:70px;" type="text" value="1000" tabindex="29">

值是 1000，而在浏览器窗口中显示的是 1500。任何人都可以看看并告诉我，这里有什么问题？

P.S: 在 Firefox 中也试过。但问题仍然是相同的，即检查器中的值不同。

这里是JS代码：

function addrow(itemName, itemid, godown, godownid, quantity, rate, amount, gstAmount) {

        gstAmount = typeof gstAmount !== 'undefined' ? gstAmount : '0';

        if (typeof dTable1 != 'undefined') {
            // dTable1.fnClearTable();
            //$('#ItemRows').find('a[name="btnDelItem"]').off();
            dTable1.fnDestroy();
            // $('#ItemRows').empty();
        }
        //alert($('#ItemRows tr').length);
        var strRow = '<tr id="row' + ($('#ItemRows tr').length + 1) + '">' +
             '<td class="">' +
            (($('#ItemRows tr').length + 1)) +
              '</td>' +
              '<td class="tdItemName" style="widtd: 250px">' +
               itemName +
             '<input name="hfItemId" style="width:200px;" type="hidden" value="' + itemid + '"/>' +
              '</td>' +
              '<td class="" style="widtd: 200px">' +
                godown +
                '<input name="hfGodownid" style="width:200px;" type="hidden" value="' + godownid + '"/>' +
                 '</td>' +
                 '<td class="" style="widtd: 200px">' +
                 '<input name="txtTblQuantity" style="width:200px;" class="num"  type="text" value="' + quantity + '"/>' +
                  '</td>' +
                   '<td class="" style="widtd: auto">' +
                  '<input name="txtTblRate" style="width:70px;" class="num"   type="text" value="' + rate + '"/>' +
                '</td>' +
                 '<td class="" style="widtd: auto">' +
                  '<input name="txtTblAmount" class="num"  style="width:70px;" type="text" value="' + amount + '"/>' +
                 '</td>' +
                 '<td>' +
                 '<input name="txtTblGstAmount" class="num"  style="width:70px;" type="text" value="' + gstAmount + '"/>' +
                 '</td>' +
                '<td class="ms"><div class="btn-group1"> <a class="btn btn-small" rel="tooltip" data-placement="left" data-original-title=" edit " name="btnDelItem" data-id="' + ($('#ItemRows tr').length + 1) + '"  ><i class="icon-remove"></i></a>  </div></td>' +

                '</tr>';
        console.log(strRow);
        console.log(amount);

        $('#ItemRows').append(strRow);
        //SaveNewParty($("#drpAccId option:selected").text());
        bindGrid();
        //dTable1.fnDraw();
        PopulateTotal();
        // $('#ItemRows').find('a[name="btnDelItem"]').off();
        var insertedRow = $('#ItemRows tr')[$('#ItemRows tr').length - 1];
        $(insertedRow).find('a[name="btnDelItem"]').on('click', function () {
            var row = $(this).parents('tr');
            dTable1.fnDeleteRow(dTable1.fnGetPosition(row[0]));
            $('#ItemRows tr').each(function (index) {
                $(this).find('td:nth(0)').text((index + 1));

            });

            PopulateTotal();


        })
        $('#datatable_Items').css('width', '100%');
        Populate_Events();
    }

Answer 1

我刚刚查看了您的代码，发现您在此处显示的代码没有问题。我同意 Afzaal Ahmad Zeeshan 的观点，但他解释的方式并非总是如此。我最近遇到了同样的问题，经过数小时的挠头后，我发现该值正在被其他一些 jquery 代码更改。

还要注意，jquery 设置的值并不总是显示在检查器中，例如，如果您尝试$("#inputel").val(4)，您会注意到该值不会在检查器中更新，而是在后端此值已更新。 Inspector 仅显示从服务器发送的值，而不是您通过 jquery 或其他设置的值。

希望你明白我的意思！

Answer 2

卡姆兰，那不重要。您正在设置此值NOT DYNAMICALLY。是的，你可以在这里看到！您要么在加载页面时设置此值，要么您正在使用其他代码，您没有向我们展示！我不确定。好的。

在我的示例中，您可以看到，我正在输入中写入文本，但元素检查中没有值更新。

另外，它可能不是答案，但您可以看到您使用的 widtd 不是正确的 CSS 属性。正确的是width。你知道的。

我相信您在将表单发送到服务器时不会遇到任何问题，因为值会根据您刚刚写入的值进行更新。

我看过你的代码，你写的字段是：

<input name="txtTblAmount" class="num"  
style="width:70px;" type="text" value="' + amount + '"/>'

据我说，问题出在amount。你在函数中也有这个字段。

function addrow(itemName, itemid, godown, 
godownid, quantity, rate, amount, gstAmount) {

现在你可以做的是改变amount 的值。如果您不想更改它，那么它可以。而且，您再次不必担心这种值差异，因为一旦您单击submit，您输入的值将被发送到服务器，而不是字段本身的value。价值只是因为你把它写在那里。没有别的，所以别担心！没关系。如果您愿意，您现在无法更改该值。然后这是地狱代码，您将不得不对其进行硬编码。像这样！

<div id="input">
  <input type="text" id="text" value="" onkeyup="updateVal()" />
</div>

function updateVal() {
  // start function..
  var val = $('#text').val(); // the value of field..
  // after getting the value, update the div..
  $('#input').html("<input type='text' id='text' value='" + 
  val + "' onkeyup='updateVal()' />");
}

但请注意，使用此代码后，您将获得字段中的当前值！但是您将失去对输入字段的关注。由于 div 将得到更新，但值将是最新的！

现在要保持专注？

你可以用这个：

$('#text').focus();

但是在使用这个的时候，你只会得到一个ONLY ONE这个词。

为什么？

因为一旦 if 将焦点放在字段上，它会（全选）选择字段内的单词或值，当您按下另一个单词时，它将用最新的替换前一个！这样你就不会得到任何正确的领域，我的意思是你选择的领域！但是您的问题将得到解决。

所以 kamran 相信我，就这样吧！您不想对其进行硬编码。如果你还想试一试，就用我分享的代码吧！

我分享的代码示例如下：

现在，当您正确设置值或某些字词时，您会在看到此开发者工具时自动更新值。像这样：

仅此而已。我为你的工作提供了两种选择。我仍然喜欢选择不使用代码，只更新字段上的值。休息取决于你卡姆兰。

编辑：

您提到您希望使用值 1000 而不是用户将添加到输入中的值。然后使用这个：

$("name='txtTblAmount'").val() == "1000");

这将自动覆盖用户将添加的值并将其替换为您想要获取的值！