locked
Create child DIV with button & jQuery RRS feed

  • Question

  • User-1290459327 posted

    Dear reader,

    I try to create a child DIV insite a container DIV by using a button and jQuery, in de code i show below, when i click the button i see a div is creating but disappears immediately after the click. In other words, the div is made but does not exist in my container DIV.

    What am i doing wrong,

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    
    <style>
    .container {
         float:right;
       /*overflow:auto;*/
        border:1px solid #000;
        width:603px;
        height:100%;
               
            }
    
     .child{
        display:table-cell;
        float:left;
        height:150px;
        width:100px;
        border:thin 1px black;
        border-right:solid 1px black;
    }
     </style>
    
    
    
    <div class="container" runat="server">
        <div class="child" ondrop="drop(event)" ondragover="allowDrop(event)">&nbsp;</div>
        <div class="child" ondrop="drop(event)" ondragover="allowDrop(event)">&nbsp;</div>
        <div class="child" ondrop="drop(event)" ondragover="allowDrop(event)">&nbsp;</div>
        <div class="child" ondrop="drop(event)" ondragover="allowDrop(event)">&nbsp;</div>
        <div class="child" ondrop="drop(event)" ondragover="allowDrop(event)">&nbsp;</div>
        <div class="child" ondrop="drop(event)" ondragover="allowDrop(event)">&nbsp;</div>
    
    
        </div>
        <button name="Div_button">Add Div</button>
    
    
    /////////////////////////////////////////////////////////////////////////////////////////////////
    
    <script>
    
    $(document).ready(function () {
    
        $("button[name='Div_button']").click(function () {
            var DivElement = $('<div class="container"><div class="child"><img src="images/i-5.png" alt="Sweep Stakes" /></div></div>');
            $(this).after(DivElement);
        });
    </script>

    Sunday, January 1, 2017 8:10 PM

Answers

  • User-474980206 posted
    Change button to type='button', so it will not post back.

    <button type="button" name="Div_button">Add Div</button>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 2, 2017 12:45 AM

All replies

  • User-474980206 posted
    Change button to type='button', so it will not post back.

    <button type="button" name="Div_button">Add Div</button>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 2, 2017 12:45 AM
  • User-1290459327 posted

    Hi bruce,

    A little thing but it is working now thanks for reply

    Monday, January 2, 2017 2:46 PM