javascript - Jquery Clone() 内部 HTML 属性没有改变

Question

我有以下代码，当执行函数 Add2List() 时，它会在不进行更改的情况下附加模板。

这里有什么问题吗？

<script type="text/javascript">
function Add2List(data, index){

        var $list_item = $('#list-template').clone();

        $list_item.find('.box-list').attr("id", "list_"+data.id);
        $list_item.find('a.list_link').attr("href", data.link);
        $list_item.find('.list_photo').attr("src", data.photo);

        $('#listings_list').append($list_item.html());

        console.log($list_item.html());


}
</script>

<script id="list-template" type="text/x-custom-template">
    <div class="box-list">
        <a class="list_link" href="#">
            <img src="" class="list_photo">
        </a>    
    </div>
</script>

Answer 1

您正在克隆 <script>标签而不是里面的html。使用 $( $('#list-template').html() )相反(demo)

function Add2List(data, index){  
  var $list_item = $($('#list-template').html());

  $list_item.attr("id", "list_"+data.id);
  $list_item.find('a.list_link').attr("href", data.link);
  $list_item.find('.list_photo').attr("src", data.photo);

  $('#listings_list').append($list_item);
  console.log(data, $list_item.html());    
}