Question

任务是this，但我编写了自定义代码。

这是我的jQuery代码：

$(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();
});

}）;

我的HTML代码：

<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>

错误：如果我点击要删除的元素，那么＆＃34;添加新项目＆＃34;按钮，然后不工作＆＃34;删除＆＃34;按钮。

Answer 1

尝试从您的javascript代码中删除event.preventDefault（）

jQuery - 单击一个项目，但不起作用

1 个答案: