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

我认为问题在于jquery没有正确处理html，因为它位于脚本标记内（或它是一个DOM问题）。

否则

var $list_item = $('<div>', {
                    html: $('#list-template').html()
                 });

而不是克隆它修复了问题。

它的作用是在内存中创建一个div元素，用于保存模板的内容（并在此后处理）。

Answer 2

在.filter('#list-template')之前使用find将解决问题，因为您正试图find $list_item变量.box-list中的当前根元素}}：

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

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

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

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

希望这有帮助。

Answer 3

您正在克隆<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());    
}

Answer 4

这是因为克隆的对象没有附加到任何东西。 jQuery的.find在一个存在的对象上运行。

您可以通过preg_match执行此操作，但由于您正在模板化 - 最好使用的是Handlebars。

Jquery Clone（）内部HTML属性不会改变

4 个答案: