jQuery functions not working after click button?

Question

What I want to happen

When press the add button, a row will be added underneath the add button's row
When press the remove button, that row will be removed.
When hover or click on a certain input text, an add button will show up next to it.
- When mouse is not hovering over the input text or the input text is not selected, then the add button should disappear.
When hover over a certain bullet, a remove button will show up in place of the bullet.
- When mouse moves away from remove button, it will revert back to a bullet.

I suspect some of my problems are occurring b/c I'm putting all my functions in $(document).ready(). If someone could type out the jQuery code that I should be using I would be really grateful!

What is happening

The Add Button

Only the first add button works.

The Remove button The other added rows' remove buttons only show up when hover over the first bullet.

The remove button only works once. After remove one row, the remove button & add button lose their functionality. The remove and add button also don't disappear as they should.

My code

HMTL

This is the row I want to add

<div class="row">
                <div class="col-lg-7">
                    <div class="form-group">
                        <div class="input-group input-group-lg">
                            <div class="input-group-btn"> 
                                <button type="button" class="btn btn-default button-remove" aria-label="Remove">
                                    <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
                                </button>
                                <button type="button" class="btn btn-default button-bullet" aria-label="Bullet">
                                    <span class="glyphicon glyphicon-one-fine-dot" aria-hidden="true"></span>
                                </button>
                            </div> 
                            <input type="text" name="Worksheet-Problem" class="form-control" placeholder="Problem..." aria-label="Write worksheet problem here"> 
                            <div class="input-group-btn">  
                                <button type="button" class="btn btn-default button-add" aria-label="Add">
                                    <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                                </button> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>

jQuery

These are the functions I'm using to animate the buttons and add/remove rows.

$(document).ready(function(){
    $("input[type='text'][name='Worksheet-Problem']").closest('.row').hover(function()      {
        $(".button-add").fadeToggle(300);
    })
    $(".button-bullet").closest('.input-group-btn').hover(function(){
        $('.button-bullet').toggle();
        $(".button-remove").toggle();
    })

    $(".button-add").click(function(){
        var $row = $(this).closest('.row');
        var $wsProbRow = $row.clone();
        $wsProbRow.insertAfter($row);
        console.log("Add-Button pressed");
    })
    $(".button-remove").click(function(){
        $(this).closest('.row').remove();
        console.log("Remove-Button pressed");
    })
})

JSFiddle

score 6 · Answer 1 · answered Jul 01 '16 at 15:56

When working with dynamic elements, you'll need to either use event delegation or bind the click handlers to the newly created elements.

With event delegation:

$(document).on("click", ".button-add", function(){
  var $row = $(this).closest('.row');
  var $wsProbRow = $row.clone();
  $wsProbRow.insertAfter($row);
  console.log("Add-Button pressed");
})

With binding after creation:

function onClick = function(){
  var $row = $(this).closest('.row');
  var $wsProbRow = $row.clone();
  $wsProbRow.find(".button-add").on("click", onClick);
  $wsProbRow.insertAfter($row);
  console.log("Add-Button pressed");
})

$(".button-add").on("click", onClick);

Better to close as duplicate rather than answering. There are already hundreds of such questions. — Turnip, Jul 01 '16 at 15:58
@Turnip true, searched for a good answer but wrote the answer myself (again) at the same time :) — Pete TNT, Jul 01 '16 at 15:59

score 1 · Answer 2 · answered Jul 01 '16 at 16:00

Do Event delegation from the document

   $(document).on('hover', 'row',function()    {
        $(".button-add").fadeToggle(300);
    })
    $(document).on('hover','.input-group-btn',function(){
        $('.button-bullet').toggle();
        $(".button-remove").toggle();
    })

    $(document).on('click',".button-add",function(){
        var $row = $(this).closest('.row');
        var $wsProbRow = $row.clone();
        $wsProbRow.insertAfter($row);
        console.log("Add-Button pressed");
    })
    $(document).on('click','.button-remove',function(){
        $(this).closest('.row').remove();
        console.log("Remove-Button pressed");
    })

Hmm but when I paste this code into [JSFiddle](https://jsfiddle.net/14ongm/xx2dnbsv/) the add and remove button don't even show up — 14wml, Jul 01 '16 at 16:13
I demonstrated the usage on event delegation, ok i will check — Piyush.kapoor, Jul 01 '16 at 16:19

score 0 · Answer 3 · answered Jul 01 '16 at 15:57

Don't bind your clicks to a class like this, because you need to dynamically add stuff, and for some stupid reason all browser don't bind the clicks to html injected after page load.

So, do like this:

$(document).on("click", ".button-add", function(){
    var $row = $(this).closest('.row');
    var $wsProbRow = $row.clone();
    $wsProbRow.insertAfter($row);
    console.log("Add-Button pressed");
})
$(document).on("click", ".button-remove", function(){
    $(this).closest('.row').remove();
    console.log("Remove-Button pressed");
})

score 0 · Answer 4 · answered Jul 01 '16 at 16:01

0

You should clone the DOM including data and events, i.e.:

var $wsProbRow = $row.clone(true);

See here: https://jsfiddle.net/r6aw21fj/

answered Jul 01 '16 at 16:01

janusz

828
6
9

jQuery functions not working after click button?

What I want to happen

What is happening

My code

4 Answers4