无法让 Jquery 在 JSFiddle 之外正常工作

Question

我有一个基本的 table，我是通过文本输入创建的，当您单击 "addTask" 按钮时，它会添加一个带有空文本框的 tr，然后单击 "delTask" 按钮应该从 table 中删除选中复选框的行。

JSFiddle 中的一切都完美无缺（除了只在 JSFiddle 之外渲染最后一个文本框的行除外）但是当我尝试实时测试代码时，"delTask" 按钮无法正常工作。它将删除 table 中除第一行以外的所有行。

我是 JQuery 的新手，所以请不要判断它是否简单，但我确实在寻找答案并尝试了我能找到的一切。谁能帮我弄清楚这里出了什么问题？提前致谢。

EDIT 我通过将 $(":checkbox[checked='true']") 更改为 $ 解决了 delTask 按钮根本不起作用的初始问题(".checkbox:checked") 在 JSFiddle 之外进行测试时，但在实时测试中仍然无法获得删除 table 上第一行的按钮。 JSFiddle link: http://jsfiddle.net/2aLfr794/14/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>

<body>
<table id="tasks" cellpadding="3" cellspacing="3" border="0">
    <tr>
        <td><input type="checkbox"></td>
        <td><input type="text" class="text"></td>
    </tr>
</table>
<br>
&nbsp; &nbsp; &nbsp;
<input type="button" id="addTask" value="Add Task" />
&nbsp; &nbsp; &nbsp;
<input type="button" id="delTask" value="Delete Tasks" />


<script>

$("#addTask").click(function(){
    var newTxt = $('<tr><td><input type="checkbox"></td><td><input type="text" class="text"></td></tr>');
    $(".text").last().prop("readonly", true);

    $("#tasks").append(newTxt);
});

    $("#delTask").click(function(){
            $(".checkbox:checked").each(function(){
                var curTask = $(this).parents('tr');
                curTask.remove();
            });
    });


</script>
</body>
</html>

Answer 1

如果出现“$ is not defined”错误，请尝试写入 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 作为 <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

请注意“//cdnjs”之前的 "http:" 当您运行来自本地机器而不是网络服务器时需要它。至少我总是需要它。

Answer 2

您的问题：

1.You 未将 class checkbox 分配给默认值 checkbox 并动态创建 checkboxes。

2.To 访问选中的元素语法为 $(".checkbox[checked='checked']")

您的更新代码：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


<body>
    <table id="tasks" cellpadding="3" cellspacing="3" border="0">
        <tr>
            <td>
                <input type="checkbox" class="checkbox">
            </td>
            <td>
                <input type="text" class="text">
            </td>
        </tr>
    </table>
    <br />&nbsp; &nbsp; &nbsp;
    <input type="button" id="addTask" value="Add Task" class="addSubmit" />&nbsp; &nbsp; &nbsp;
    <input type="button" id="delTask" value="Delete Selected Tasks" />
    <script>
        $("#addTask").click(function() {
            var newTxt = $('<tr><td><input type="checkbox" class="checkbox"></td><td><input type="text" class="text"></td></tr>');
            $(".text").last().prop("readonly", true);
            $("#tasks").append(newTxt);
        });

        $(document).ready(function() {
            $("#delTask").click(function() {
                console.log($(".checkbox[checked='checked']"))
                $(".checkbox:checked").each(function() {
                    var curTask = $(this).parents('tr');
                    curTask.remove();

                });
            });
        });
    </script>
</body>

Answer 3

$("input[type=checkbox]:checked")

对我有用

无法让 Jquery 在 JSFiddle 之外正常工作

Can't get Jquery to work correctly outside of JSFiddle

javascript

jquery

html

jsfiddle

document-ready