Hiding dynamically generated content by default

In my javascript file, I have the following template string that contains a form with id="update-quote-form" that I'd like to hide by default:

$("#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>`

I'd like to have it hidden before using toggle to have it appear. This is the click handler im using to toggle this id:

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

I tried having it set to display: none in the css, but I believe the click handler won't notice it since it hasn't loaded.

Is there a way around this?

Answers 1

  • setting css display should work fine (I've modified the code a bit though) -

    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>


Related Articles