是否可以將JavaScript注入使用ajax調用后加載的dom？

Question

我有一個ID為#id1的div ，其中包含鏈接。 每當我單擊鏈接時，我都會進行一次AJAX調用，該調用還會從服務器返回其他鏈接。

現在，我正在使用JQuery replaceWith()方法在#id1中用新鏈接替換舊鏈接。 這樣，我維護了div的id為#id1 。

我要在此處實現的目標是，通過使用#id1單擊div上那些新占用的鏈接，並連續不斷地從服務器中獲取另一束鏈接。

是否可以編寫這樣的腳本？

<div id = "id1">
<ul>
<li><a href ="test/show/1">link1</a></li>
<li><a href ="test/show/2">link1</a>link2</li>
....
</ul>
</div>
 <script> 
  $('#id1 a').on(click, function(){
     $.ajax({
            url: '/test/test_now?page=' + page,
            dataType: 'json',
            success: function(response) {
                   $('#id1').repalceWith(response.links);
            },
            error: function() {

                alert('An error occurred');
            }
        });</pre>

Answer 1

正如Pointy所說的，我認為您需要更加具體，但是我認為這是模板工作，我最喜歡的模板之一（小尺寸）是Template7 。

您可以在html腳下的腳本標簽中創建模板，如下所示：

<script id="template" type="text/template7">
  <ul>
    {{#each links}}
    <li>
      <a href="{{url}}">{{text}}</a>
    </li>
    {{/each}}
  </ul>
</script>

然后使用jQuery或JS

var template = $('#template').html();

// compile it with Template7
var compiledTemplate = Template7.compile(template);

// Now we may render our compiled template by passing required context
var context = {
    links:[
        {text:'Text',url:'http://www.example.com'}
    ]
};

var html = compiledTemplate(context);
$('#id1').html( html );

您可以在任意位置添加上下文，每次接收新鏈接時，只需更新上下文並重復使用已編譯的模板，然后在“＃id1” div中再次替換html別忘了包含Template7的js腳本文件在你的HTML

問候