在Javascript Jquery中警告变量时,没有更新文本字段错误中的值


not updating value from text field error when alerting a variable in Javascript Jquery

我目前正在为我的URL shortener网站开发userCP,部分是在userCP上,您可以通过Jquery管理您的URL。我遇到的问题是,当提醒一行的值时,它会打印正确的URL/Short URL。这很好。

我的问题是,当按下编辑按钮时,这两个字段会变成文本字段,使其可编辑,这也很好,但当我编辑它们并单击保存时,它会提醒以前的URL/短URL。我想让它提醒新的值,但它似乎不起作用。

以下是我所做的:

<?php while($list = $listURLs->fetch_array()) { ?> *As you can see, i'm looping.*
    <td id="longURL<?= $list['ID']; ?>"><a rel="tooltip" title="<?= $list['longURL']; ?>" target="_blank" href="<?= $list['longURL']; ?>"><?= substr($list['longURL'],0,25); ?></a></td>
            <td id="shortURL<?= $list['ID']; ?>"><input type='text' class='span2' onmouseover="(this.select())" value='http://smurl.es/<?= $list['shortURL']; ?>'/></td>
            <td><?= $list['type']; ?></td>
            <td><?= $time; ?></td>
            <td><?= $list['hits']; ?></td>
            <td><button id="edit<?= $list['ID']; ?>" class='btn btn-warning btn-small' rel='tooltip' title='Edit'><i class="icon icon-edit"></i></button>&nbsp;<button id="del<?= $list['ID']; ?>" class='btn btn-danger btn-small' rel='tooltip' title='Delete'><i class="icon icon-trash"></i></button></td>
        </tr>
            <script type="text/javascript">
                $("button#edit<?= $list['ID']; ?>").click(function() {

                $('#longURL<?= $list['ID']; ?>').html("<input type='text' id='lurl<?= $list['ID']; ?>' value='<?= $list['longURL']; ?>' />");
                $('#shortURL<?= $list['ID']; ?>').html("<div class='input-prepend'><span class='add-on'>http://smurl.es/</span><input id='surl<?= $list['ID']; ?>' type='text' value='<?= $list['shortURL']; ?>' class='span1' /></div>");
                $("button#edit<?= $list['ID']; ?>").attr({"class": "btn btn-info btn-small", "data-original-title": "Click to Save", "id": "save<?= $list['ID']; ?>"});
                });
                var click<?= $list['ID']; ?> = 0;
                $(document).on('click', 'button#save<?= $list['ID']; ?>', function() {
                click<?= $list['ID']; ?> += 1;
                if(click<?= $list['ID']; ?> >= 2) {
                  var shortURL = $('#surl<?= $list['ID']; ?>').val();
                  var longURL = $('#lurl<?= $list['ID']; ?>').val();
                  var name = $("#name").val();
                  var name = $("#name").text();
                  alert("short: " + shortURL + "'n'nLong: " + longURL);
                   $("button#save<?= $list['ID']; ?>").attr({"class": "btn btn-warning btn-small", "data-original-title": "Edit", "id": "edit<?= $list['ID']; ?>"});
                           $('#longURL<?= $list['ID']; ?>').html("<a target='_blank' href='<?= $list['longURL']; ?>'>" + "<?= $list['longURL']; ?>".substring(0, 25) + "</a>");
                   $('#shortURL<?= $list['ID']; ?>').html("<input type='text' class='span2' onmouseover='(this.select())' value='http://smurl.es/<?= $list['shortURL']; ?>'/>");
                 click<?= $list['ID']; ?> = 0;

                }
                });
            </script>
        <?php 
            }
        }
         ?>

正如你所看到的,我使用:

$('#longURL<?= $list['ID']; ?>').html("<input type='text' id='lurl<?= $list['ID']; ?>' value='<?= $list['longURL']; ?>' />");
$('#shortURL<?= $list['ID']; ?>').html("<div class='input-prepend'><span class='add-on'>http://smurl.es/</span><input id='surl<?= $list['ID']; ?>' type='text' value='<?= $list['shortURL']; ?>' class='span1' /></div>");

将文本更新为文本字段以使其可编辑。但它不起作用。。。

它只是在我尝试编辑它之前提醒相同的以前的URL

谢谢。

可能在更改值之前评估javascript,

var shortURL = $('#surl<?= $list['ID']; ?>').val();
var longURL = $('#lurl<?= $list['ID']; ?>').val();

上面的片段首先被评估,当点击事件被触发时,评估的结果被执行(而不是在点击事件中评估它,然后执行它)

您可以通过右键单击浏览器中的网页并查看页面源代码(呈现的html代码)来确认这一点,以查看页面中真正的javascript。