javascript 从表中删除 tr

Question

我之前看到过这个问题，但我无法让它发挥作用。我有以下代码

<script type="text/javascript">

var scntDiv = $('#p_scents');
var i = $('#p_scents tr').size() + 1;

$('#addScnt').click(function() {
    scntDiv.append('<tr><td> <input type="text" name="model" id="model"/></td><td><input type="text" name="desc" id="desc"/></td><td> <input type="text" name="price" id="price"/></td><td><input type="text" name="qty" id="qty"/></td><td><a href="#" id="remScnt">Delete</a></td></tr>');   
    i++;
    return false;
});

//Remove button
$(document).on('click', '#remScnt', function() {
    if (i > 2) {
        $(this).closest('tr').remove();
        i--;
    }
    return false;
});

删除功能不起作用请帮助这里是 fiddle :http://jsfiddle.net/scumah/xtyFh/8/

这是我的页面代码:

{embed="shared/_html_header"}
{embed="shared/_page_header"}

<style = "text/css">
{ font-family:Arial; }
h2 { padding:0 0 5px 5px; }
h2 a { color: #224f99; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }
p { padding:0 0 5px 0; }

input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }
</style>



<div id="main_body_content">





<h4>
<a href="#" id="addScnt">Add Another Input Box</a>
</h4>
<table class="dynatable">
<thead>
    <tr>
        <th>Model</th>
        <th>Description</th>
        <th>Price</th>
        <th>Quantity</th>
    </tr>
</thead>
<tbody id="p_scents">
    <tr>
        <td>
            <input type="text" name="model" read-only id="model"/>
        </td>
        <td>
            <input type="text" name="desc" id="desc"/>
        </td>

        <td>
            <input type="text" name="price" id="price"/>
        </td>
        <td>
            <input type="text" name="qty" id="qty"/>
        </td>

    </tr>
</tbody>
</table>
<script type="text/javascript">

var scntDiv = $('#p_scents');
var i = $('#p_scents tr').size() + 1;

$('#addScnt').click(function() {
    scntDiv.append('<tr><td> <input type="text" name="model" id="model"/></td><td><input type="text" name="desc" id="desc"/></td><td> <input type="text" name="price" id="price"/></td><td><input type="text" name="qty" id="qty"/></td><td><a href="#" id="remScnt">Delete</a></td></tr>');   
    i++;
    return false;
});

//Remove button
$(document).on('click', '#remScnt', function() {
    if (i > 2) {
        $(this).closest('tr').remove();
        i--;
    }
    return false;
});

</script>

</div>


</div><!--/main_body_content-->



{embed="shared/_page_footer"}

Answer 1

我遇到了你的问题，并根据问题提供了解决方案。

在您的脚本中，在生成所有 DOM 元素之前发生的事情，这就是事件未与元素正确绑定(bind)的原因。因此，您需要将脚本包装在 document.ready() 事件中，如下所示:

<script type="text/javascript">
        $(document).ready(function () {

        var scntDiv = $('#p_scents');
        var i = $('#p_scents tr').size() + 1;

        $('#addScnt').click(function () {
            scntDiv.append('<tr><td> <input type="text" name="model" id="model"/></td><td><input type="text" name="desc" id="desc"/></td><td> <input type="text" name="price" id="price"/></td><td><input type="text" name="qty" id="qty"/></td><td><a href="#" id="remScnt">Delete</a></td></tr>');
            i++;
            return false;
        });

        //Remove button

            $(document).on('click', '#remScnt', function () {
                if (i > 2) {
                    $(this).closest('tr').remove();
                    i--;
                }
                return false;
            });

        });
</script>