jQuery - Click a item, but does not working

Question

The task is this, but I write custom code.

Here is my jQuery code:

$(document).ready(function() {
$('.add-new-item').click(function(event){
    event.preventDefault()
    $('table#teant-details tbody').append('<tr><td><input class="form-control" type="text"></td><td><input class="form-control" type="text"></td><td><a class="btn btn-danger remove-item">Remove</a></td></tr>');
});

$('.remove-item').click(function(e){
    console.log('Hello!'); // DEBUG

    // BUG: If I click an element to remove, that make by the "Add new item" button, then does not work the "Remove" button.
    $("tr:hover").remove();
});

});

And my HTML code:

<div class="col-md-12">
<table class="table" id="teant-details">
    <thead>
        <tr>
            <th>Name</th>
            <th>Value</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <div class="input-wrapper">
                <td><input class="form-control" type="text" value="Balazs"></td>
                <td><input class="form-control" type="text" value="The Boss"></td>
                <td><a class="btn btn-danger remove-item">Remove</a></td>
            </div>
        </tr>

        <tr>
            <div class="input-wrapper">
                <td><input class="form-control" type="text" value="Dori"></td>
                <td><input class="form-control" type="text" value="Python developer"></td>
                <td><a class="btn btn-danger remove-item">Remove</a></td>
            </div>
        </tr>

        <tr>
            <div class="input-wrapper">
                <td><input class="form-control" type="text" value="Bence"></td>
                <td><input class="form-control" type="text" value="Python developer"></td>
                <td><a class="btn btn-danger remove-item">Remove</a></td>
            </div>
        </tr>

        <tr>
            <div class="input-wrapper">
                <td><input class="form-control" type="text" value="Tasi"></td>
                <td><input class="form-control" type="text" value="Front End developer"></td>
                <td><a class="btn btn-danger remove-item">Remove</a></td>
            </div>
        </tr>
    </tbody>
</table>
<div class="row">
    <div class="col-md-6">
        <a class="btn btn-primary save-changes" href="#">Save changes</a>
    </div>
    <div class="col-md-6">
        <div class="add-new-item-wrapper">
            <a class="btn btn-success add-new-item">Add new item</a>
        </div>
    </div>
</div>

The bug:If I click an element to remove, that make by the "Add new item" button, then does not work the "Remove" button.

score -2 · Answer 1 · answered Feb 18 '15 at 13:03

-2

try removing event.preventDefault() form your javascript code

answered Feb 18 '15 at 13:03

Payel Roy Burman

62
7

I removed the event.preventDefault() line, but the code is not working. – kistasi Feb 18 '15 at 13:28
try adding an "id" to the div which you want to click. then pass the id selector to the .click function. – Payel Roy Burman Feb 19 '15 at 10:17

jQuery - Click a item, but does not working

1 Answers1