jQuery错误

Question

我的代码中发生了一些奇怪的错误。我想将HTML模板标签与jQuery一起使用，因为我的所有其余代码都是jQuery，但我只发现了JavaScript示例。我试图从JavaScript“翻译”到jQuery，这就是我想出的。

$.getJSON( "../Controller/ControllerBookstore.php?show_books=true", function( data ) {
        $.each( data, function( index, value ) {
            // let clone = document.getElementById('table-template').content.cloneNode(true);
            // clone.querySelector('#id').innerText = value.id;
            // clone.querySelector('#author').innerText = value.author;
            // clone.querySelector('#title').innerText = value.title;
            // clone.querySelector('#isbn').innerText = value.isbn;
            let clone = $("#table-template").clone(true);
            $("#id",clone).text(value.id);
            $("#author",clone).text(value.author);
            $("#title",clone).text(value.title);
            $("#isbn",clone).text(value.isbn);
            //$(".container").append(clone);
            $("#header").append(clone);
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

        <div id="myAlert" class="alert alert-success collapse">
            <span id="alert-text"></span>
            <a id="alert-close" class="close" href="#" aria-label="Close">&times;</a>
        </div>

        <div class="row" id="header">
            <div class="col"><h5>ID</h5></div>
            <div class="col"><h5>Author</h5></div>
            <div class="col"><h5>Title</h5></div>
            <div class="col"><h5>ISBN</h5></div>
            <div class="col"><h5>Action</h5></div>
        </div>

        <template id="table-template">
            <div class="row">
                <div class="col" id="id"></div>
                <div class="col" id="author"></div>
                <div class="col" id="title"></div>
                <div class="col" id="isbn"></div>
                <div class="col buttons">
                    <button class='btn btn-info edit'>Edit</button>
                    <button class='btn btn-danger delete'>Delete</button>
                </div>
            </div>
        </template>
        
        <div class="row justify-content-center" >
            <form action="" class="col-4">
                <input id = "id-box" type="hidden" name="id">
                <div class="form-group row">
                    <label class="col-4">Author</label>
                    <input id = "author-box" type="text" class="form-control col-8" name="author" placeholder="Enter the author of the book">
                </div>
                <div class="form-group row">
                    <label class="col-4">Title</label>
                    <input id = "title-box" type="text" class="form-control col-8" name="title" placeholder="Enter the title of the book">
                </div>
                <div class="form-group row">
                    <label class="col-4">ISBN</label>
                    <input id = "isbn-box" type="text" class="form-control col-8" name="isbn" placeholder="Enter the ISBN of the book">
                </div>
                <div class="form-group row">
                    <button id = "submit" type="submit" name="save" class="btn btn-primary col-12">Save</button>

                </div>
            </form>
        </div>
</div>

由于某种原因，我注释掉的JavaScript代码可以正常工作，但仅在表单下方的下一行中将“克隆”正确附加到我的“ .container”上。但是，我想将其附加到我的“ .header”上，但它附加在标题旁边，而不是在标题下方。 jQuery代码不执行任何操作，也不在任何地方附加我的“克隆”。我希望我很清楚。您能帮我找出错误的原因吗？

Answer 1

jQuery错误

你好，我的朋友。您正在克隆不正确的元素，因为您创建了ID为template的{{1}}的克隆。请对您的代码进行更改：

...
let clone = $("#table-template").html();
...

另一方面，克隆的代码显示在#table-template旁边而不是它的下方，因为您使用的是#header类。我建议在.row下方创建一个div，并在其中添加一个新内容：

...
// $("#header").append(clone);
-> $("#body").append(clone);
...

Answer 2

需要一些更改：

模板的id值带有连字符，必须在选择器中将其转义。字符串文字中需要两个反斜杠；首先需要在字符串中实际得到一个反斜杠。其余的将由选择器解释。
克隆模板中的行元素，而不是模板本身。但是，jQuery不会知道template标记内的DOM，因此您可以直接获取HTML内容而不是进行克隆，然后将其再次转换为jQuery对象（为其生成DOM）。
在模板之前插入克隆

代码：

let clone = $($("#table\\-template").html()); // <--------
$("#id",clone).text(value.id);
$("#author",clone).text(value.author);
$("#title",clone).text(value.title);
$("#isbn",clone).text(value.isbn);
$("#table-template").before(clone); // <------

正如其他人所评论的那样，id属性应该具有唯一的值，因此您的模板内容不能具有id属性（因为它已被克隆）。请改用class属性。

如何在jQuery中使用HTML模板标签？

2 个答案:

jQuery错误