Javascript Can'；无法让Jquery在JSFIDLE之外正常工作_Javascript_Jquery_Html_Jsfiddle_Document Ready

Javascript Can'；无法让Jquery在JSFIDLE之外正常工作

javascript jquery html

Javascript Can'；无法让Jquery在JSFIDLE之外正常工作,javascript,jquery,html,jsfiddle,document-ready,Javascript,Jquery,Html,Jsfiddle,Document Ready,我有一个通过文本输入创建的基本表，当您单击“addTask”按钮时，它会添加一个带有空文本框的tr，单击“delTask”按钮应删除表中选中复选框的行一切都在JSFIDLE中完美地工作（除了呈现最后一个文本框readonly的行，它只在JSFIDLE之外工作），但是当我尝试对代码进行实时测试时，“delTask”按钮不能正常工作。它将删除表中除第一行以外的所有行我对JQuery还相当陌生，所以请不要判断它是否简单，但我确实在寻找答案，并尝试了我能找到的一切。有人能帮我找出这里出了什么问题吗？

我有一个通过文本输入创建的基本表，当您单击“addTask”按钮时，它会添加一个带有空文本框的tr，单击“delTask”按钮应删除表中选中复选框的行

一切都在JSFIDLE中完美地工作（除了呈现最后一个文本框readonly的行，它只在JSFIDLE之外工作），但是当我尝试对代码进行实时测试时，“delTask”按钮不能正常工作。它将删除表中除第一行以外的所有行

我对JQuery还相当陌生，所以请不要判断它是否简单，但我确实在寻找答案，并尝试了我能找到的一切。有人能帮我找出这里出了什么问题吗？提前谢谢

EDIT我已经修复了delTask按钮不起作用的最初问题，在JSFIDLE之外进行测试时，我将$（“：checkbox[checked='true']”）更改为$（“.checkbox:checked”），但仍然无法获得在实时测试中删除表上第一行的按钮。 JSIDLE链接：




$（“#添加任务”）。单击（函数（）{
var newText=$（''）；
$（“.text”）.last（）.prop（“只读”，true）；
$（“#任务”）.append（newText）；
});
$（“#delTask”）。单击（函数（）{
$（“.checkbox:checked”）.each（函数（）{
var curTask=$（this.parents（'tr'）；
curTask.remove（）；
});
});

如果出现“$未定义”错误，请尝试写入

作为

请注意“http://cdnjs之前”，当您从本地计算机而不是web服务器运行这些文件时，需要使用“http://cdnjs”。至少我总是需要它

您的问题：

1.您没有将类

复选框

指定给默认的

复选框

，也没有动态创建

复选框

2.要访问选中的元素，语法为

$（“.checkbox[checked='checked']”

您的更新代码：




$（“#添加任务”）。单击（函数（）{
var newText=$（''）；
$（“.text”）.last（）.prop（“只读”，true）；
$（“#任务”）.append（newText）；
});
$（文档）.ready（函数（）{
$（“#delTask”）。单击（函数（）{
console.log（$（“.checkbox[checked='checked']））
$（“.checkbox:checked”）.each（函数（）{
var curTask=$（this.parents（'tr'）；
curTask.remove（）；
});
});
});

为我工作

尝试使用

$（“.checkbox:checked”）

而不是

$（“.checkbox[checked='true']）

。提供Fiddle的链接控制台上说了什么？@Satpal你的解决方案成功了！！它现在工作得很好。万分感谢！新问题是，除了JSFIDLE之外的第一个任务，我可以删除所有任务。我将在上面的描述中添加到JSFIDLE的链接。这个答案解决了我遇到的所有问题。我曾尝试将类分配给复选框，但没有添加console.log。非常感谢你的帮助。

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

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