Question

所以我使用jQuery加载一个html文件，然后在一些令牌上做一个简单的字符串替换。但是他们不会做替换。有人可以向我解释为什么这不适用于替换电话吗？

pendingRow.html

<span id="{pendingDbId}" data-database="{pendingName}">
    {pendingName} ({pendingTime}) - <a id="cancel-{pendingDbId}" data-dbId="{pendingDbId}" href="#">Cancel</a>
    <br />
</span>

的jQuery

$('#pendingLoadDiv').load('templates/pendingRow.html', function() {
                            $('#pendingLoadDiv').html($('#pendingLoadDiv').html().replace("{pendingName}", $('#database option:selected').text()));
                            $('#pendingLoadDiv').html($('#pendingLoadDiv').html().replace("{pendingDbId}", $('#database').val()));
                            $('#pendingLoadDiv').html($('#pendingLoadDiv').html().replace("{pendingTime}", "--:--:--"));
                            $('#pendingDiv').append($('#pendingLoadDiv').html());
                        });

它一直到底部的附加没有错误，但它没有替换任何文本。

我甚至尝试将pendingLoadDiv存储到变量中，然后对变量运行替换调用，但仍然遇到同样的问题。

有什么想法吗？

Answer 1

你真的不应该使用加载，我确信浏览器会在id中出现无效字符。此外，当您可以直接使用字符串时，您正在进行所有这些DOM查找。

$.ajax({
  url: "templates/pendingRow.html",
  success: function( data ){
        var html = data.replace("{pendingName}", $('#database option:selected').text())
                        .replace("{pendingDbId}", $('#database').val())
                        .replace("{pendingTime}", "--:--:--");
        $('#pendingDiv').append( html );
  }
});

Answer 2

在load成功处理程序中，它还没有更新容器。您应该首先将html设置为容器，然后尝试替换。

$('#pendingLoadDiv').load('templates/pendingRow.html', function(data) {
  var $pendingLoadDiv = $('#pendingLoadDiv').html(data);
  var markup = $pendingLoadDiv.html(); 

  markup = markup.replace("{pendingName}", $('#database option:selected').text());
  markup = markup.replace("{pendingDbId}", $('#database').val());
  markup = markup.replace("{pendingTime}", "--:--:--");

   $('#pendingDiv').append(markup);
});

Answer 3

.replace（）只会替换字符串的第一个实例，然后返回。要执行replaceAll，请使用带有全局标志的正则表达式：http://jsfiddle.net/RwPuu/

$('#pendingLoadDiv').html($('#pendingLoadDiv').html().replace(/{pendingName}/g, "replacingString"));

编辑：与其他答案相反，jQuery API文档似乎也表明所选元素的内容已被替换，然后运行回调。 http://api.jquery.com/load

Answer 4

我猜想在调用内部函数时，Jquery尚未使用加载的数据更新div的内容，因此您正在搜索/替换即将被删除的OLD数据

尝试

$('#pendingLoadDiv).load('templates/pendingRow.html', function(data) {
                                                               ^^^^^--- the loaded data
   data.replace("{pendingName}", $('#database option:selected').text()));
   etc...
   $('#pendingDiv').append(data);
}

Javascript替换不使用jQuery

4 个答案: