0
 <!DOCTYPE html>
    <html>
        <head>
            <!-- Latest compiled and minified CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

            <!-- Optional theme -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
        </head>
        <body>
        <div class="theWholeThing">
            <table class="table table-bordered table-striped" id="myTable">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                        <th>Yes</th>
                        <th>No</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Jacob</td>
                        <td>@fat</td>
                        <td class="yesBtnSpace"><button class="btn btn-success btn-sm" id="yesButton">Yes</button></td>
                        <td class="noBtnSpace"><button class="btn btn-danger btn-sm" id="noButton">No</button></td>
                    </tr>
                </tbody>
            </table>

            <div class="btnGroup">
                <button class="btn btn-primary" id="add-row">
                    <span class="glyphicon glyphicon-plus"></span> Add
                </button>
            </div>
        </div>

            <!-- Google Hosted JQuery CDN -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

            <!-- Latest compiled and minified JavaScript -->
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        </body>
    </html>

    <script type="text/javascript">
        $("#yesButton").click(function(){
            $("#noButton").fadeOut();
        });
        //No Button goes away ^

        $("#noButton").click(function(){
            $("#yesButton").fadeOut();
        });
        //Yes Button goes away group ^

        $(".noBtnSpace").click(function(){
            $("#noButton").fadeIn();
        });
        //No button comes back ^

        $(".yesBtnSpace").click(function(){
            $("#yesButton").fadeIn();
        });
        //Yes button comes back ^

        $("#add-row").click(function(){
            $("#myTable > tbody:last-child")
                .append('<tr><td></td> <td></td> <td></td> <td></td> <td class="yesBtnSpace"><button class="btn btn-success btn-sm" id="yesButton">Yes</button></td> <td class="noBtnSpace"><button class="btn btn-danger btn-sm" id="noButton">No</button></td></tr>')
        });

    </script>

So, my code is super messy because i'm super new to web design (literally started 4 days ago...) But I really need the yes/no button function to work. Btw you will see what i mean by working when you put the code in NotePad++ and run it in chrome. Because when I add the rows to my table the yes/no functionality goes away. Any help and advice is really appreciated >.<

Hzbrz
  • 1
  • 1
  • Learn [Event Delegation](http://learn.jquery.com/events/event-delegation/) – Satpal Jul 18 '16 at 07:34
  • You need to use event delegation as you're appending elements to the DOM after it has loaded. Also note that your code will be invalid as you are appending multiple elements with the same `id` attribute. Change those to classes instead. – Rory McCrossan Jul 18 '16 at 07:34
  • Omg OK!!! I will try it, although i fully don't understand what you are saying >. – Hzbrz Jul 18 '16 at 07:35
  • YES and NO does what exactly? If I click YES what will happen? and if I click NO what suppose to happen? – King Jul 18 '16 at 10:00
  • Just put the code in NP++ and run it in chrome you will see what happens. I am sorry it is hard for me to explain. – Hzbrz Jul 18 '16 at 16:39

0 Answers0