javascript - 默认隐藏动态生成的内容

Question

在我的 javascript 文件中，我有以下模板字符串，其中包含一个带有 id="update-quote-form" 的 form ，我想将其隐藏默认:

$("#quoteTarget").append(
          `<h3>${index.phrase}</h3>
              <h4>${index.author}</h4>
            <div class="childshow">
                <a href="javascript:void(0)" class="delete-quote">
                  <span class="glyphicon glyphicon-trash" value="${index._id}">
                </a>

                <a href="javascript:void(0)" class="update-quote">
                  <span class="glyphicon glyphicon-pencil" value="${index._id}">
                </a>

                <div class='childshow'>
                  <form id="update-quote-form">
                    <div class="form-group">
                      <input type="text" name="phrase" class="form-control" placeholder="${index.phrase}">
                    </div>
                    <div class="form-group">
                      <input type="text" name="author" class="form-control" placeholder="${index.author}">
                    </div>
                    <div class="form-group">
                      <input class="temp" type="submit" value="submit change" name="${index._id}">
                    </div>
                  </form>
                </div>
            </div>
              <hr>`

我想在使用切换让它显示之前将其隐藏。这是我用来切换此 id 的点击处理程序:

$('#quoteTarget').hover(function() {
  $(".childshow").on("click",function (e) {
      console.log("hi");
      e.stopPropagation();
      $(this).children('.childshow').toggle();
  });

我尝试在 CSS 中将其设置为 display: none，但我相信点击处理程序不会注意到它，因为它尚未加载。

有办法解决这个问题吗？

Answer 1

设置 css display 应该可以正常工作(不过我对代码做了一些修改) -

var index={author:"test", phrase:"test phrase",_id:1}
$("#quoteTarget").append(
  `<h3>${index.phrase}</h3>
              <h4>${index.author}</h4>
            <div class="childshow">
                <a href="javascript:void(0)" class="delete-quote">
                  <span class="glyphicon glyphicon-trash" value="${index._id}">
                </a>

                <a href="javascript:void(0)" class="update-quote">
                  <span class="glyphicon glyphicon-pencil" value="${index._id}">
                </a>

                <div class='childshow'>
                <div class="childshow-header">Click me</div>
                <div class="childshow-content">
                  <form id="update-quote-form">
                    <div class="form-group">
                      <input type="text" name="phrase" class="form-control" placeholder="${index.phrase}">
                    </div>
                    <div class="form-group">
                      <input type="text" name="author" class="form-control" placeholder="${index.author}">
                    </div>
                    <div class="form-group">
                      <input class="temp" type="submit" value="submit change" name="${index._id}">
                    </div>
                  </form>
                </div>
            </div>
            </div>
              <hr>`);

//$('#quoteTarget').hover(function() {
  $(".childshow-header").on("click", function(e) {
    //console.log("hi");
   // e.stopPropagation();
    $(this).next(".childshow-content").toggle();
  });
//});

.childshow-header{
  width:100%;
  height: 20px;
  background-color: gray;
}

.childshow-content{
  display:none;
}
.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="quoteTarget">

</div>