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

删除功能不起作用请帮助这里是小提琴：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

ID在HTML中必须是唯一的，而是使用类作为选择器，如class="remScnt"

将选择器更改为

$(document).on('click', '.remScnt', function() {

此外，将您的代码包装在文档就绪函数

中

$(document).ready(function() {
});

Answer 2

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

在脚本中生成所有DOM元素之前发生的事情，这就是事件没有与元素正确绑定的原因。因此，您需要将脚本包装在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>

javascript从表中删除tr

2 个答案: