Question

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

进一步明确，这是图像： enter image description here

您可以在检查器中看到 <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

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

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

此外，它可能不是答案，但您可以看到您使用的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的价值。如果你不想改变它，那就OK了。此外，您再次不应该担心这种价值差异，因为一旦您点击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相信我，让它成为现实吧！你不想硬编码。如果您还想尝试一下，请使用我分享的代码！

我分享的代码示例如下：

zero value

现在，当您正确使用值或某些单词时，当您看到此开发人员工具时，您将获得自动更新的值。像这样：

enter image description here

就是这样。我为你的工作提供了两个选择。我仍然喜欢选择不使用代码，只更新字段上的值。休息对你来说是Kamran。

修改

您想要使用值1000而不是用户将添加到输入的值。然后使用：

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

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

Answer 2

我刚刚查看了您的代码，发现您在此处向我们展示的代码中没有任何问题。我同意Afzaal Ahmad Zeeshan但他解释的方式并非总是这样。我最近遇到了同样的问题，经过几个小时的磨头后，我发现其他一些jquery代码改变了这个值。

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

希望你明白我的意思！

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

2 个答案: