Question

在我的javascript文件中，我有以下模板字符串，其中包含form id="update-quote-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>`：

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

我希望在使用切换显示之前将其隐藏起来。这是用于切换此ID的点击处理程序：

display: none

我尝试在css中设置为<hibernate-mapping> <class name="AttrDesc" table="ATTRDESC"> <composite-id> <key-property name="attr_id" type="long"/> <key-property name="language_id"/> </composite-id> <property name="attrtype_id"/> <property name="name"/> <property name="description"/> <property name="description2"/> <property name="field1"/> <property name="groupname"/> <property name="qtyunit_id"/> <property name="noteinfo"/> <filter name="langFilter" condition=":langid=language_id"/> </class> <filter-def name="langFilter"> <filter-param name="langid" type="int"/> </filter-def> </hibernate-mapping>，但我相信点击处理程序因为没有加载而无法注意到它。

有解决方法吗？

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>

默认情况下隐藏动态生成的内容

1 个答案: