Javascript 提交表单而不刷新页面-单击函数toggle（），提交后不工作

我有一个没有页面刷新的表单，它工作得很好，保存到数据库等

但是，一旦我提交了表单，下面的点击功能将不再切换，除非我刷新页面

$("#pinlink").click(function () {
        $("#pincontent").toggle();
});

代码如下：

echo'<strong>Printer PIN:</strong>&nbsp;<a id="pinlink"><img src="images/edit.png" width="18px" height="18px" title="Edit you PIN number"></a>

<div id="results"><div>

<div id="pinnumber">'.$learner->idnumber.'<div>                 

<div id="pincontent" style="display:none;">
<form name="myform" id="myform" method="POST" enctype="multipart/form-data">  
<input type="text" name="idnumber" id="idnumber" placeholder="Enter your new PIN" size="20" value=""/>
<input name="id" type="hidden" value="'.$learner->id.'" />      
<input type="submit" name="submit" value="Update"> 
</form>
<div>';


$(document).ready(function(){

    $("#pinlink").click(function () {
    $("#pincontent").toggle();
    });

    $("#myform").validate({
        debug: false,
        rules: {
            idnumber: "required",
        },
        messages: {
            idnumber: "Please enter your PIN",
        },
        submitHandler: function(form) {
            $("#pincontent").hide();
            // do other stuff for a valid form
            $.post('process.php', $("#myform").serialize(), function(data) {
                $('#results').html(data);
            });
        }
    });
});

echo'打印机PIN:
“.$learner->idnumber”
';
$（文档）.ready（函数（）{
$（“#pinlink”）。单击（函数（）{
$（“#pincontent”）.toggle（）；
});
$（“#myform”）。验证({
调试：错误，
规则：{
idnumber:“必需”，
},
信息：{
idnumber:“请输入您的PIN”，
},
submitHandler:函数（表单）{
$（“#pincontent”）.hide（）；
//为有效的表单做其他事情
$.post（'process.php'，$（“#myform”）.serialize（），函数（数据）{
$（'#results'）.html（数据）；
});
}
});
});

---

非常感谢您的帮助。

您能升级到jQuery的最新版本吗？我想知道新的on（）方法是否比click（）更有效

使用：

或者更好：

$(document).on("click", "#pinlink", function() { });

第二种形式使用了一种称为事件委派（eventdelegation）的方法，这在这种情况下可能会有所帮助，因为在AJAX响应之后，单击处理程序似乎变得不绑定了

如果无法升级，请尝试改用delegate（）方法：

$(document).delegate("click", "#pinlink", function() { });

---

你试过bind吗

 $("#pinlink").bind('click', function() {
    $("#pincontent").toggle();
    });

---

好的，我发现了错误，您忘记正确关闭div。（在结果div和pinnumber处）

它应该在以下方面发挥作用：

echo'<strong>Printer PIN:</strong>&nbsp;<a id="pinlink"><img src="images/edit.png" width="18px" height="18px" title="Edit you PIN number"></a>

<div id="results"></div>

<div id="pinnumber">'.$learner->idnumber.'</div>                 

<div id="pincontent" style="display:none;">
<form name="myform" id="myform" method="POST" enctype="multipart/form-data">  
<input type="text" name="idnumber" id="idnumber" placeholder="Enter your new PIN" size="20" value=""/>
<input name="id" type="hidden" value="'.$learner->id.'" />      
<input type="submit" name="submit" value="Update"> 
</form>
<div>';


$(document).ready(function(){

    $("#pinlink").click(function () {
    $("#pincontent").toggle();
    });

    $("#myform").validate({
        debug: false,
        rules: {
            idnumber: "required",
        },
        messages: {
            idnumber: "Please enter your PIN",
        },
        submitHandler: function(form) {
            $("#pincontent").hide();
            // do other stuff for a valid form
            $.post('process.php', $("#myform").serialize(), function(data) {
                $('#results').html(data);
            });
        }
    });
});

echo'打印机PIN:
“.$learner->idnumber”
';
$（文档）.ready（函数（）{
$（“#pinlink”）。单击（函数（）{
$（“#pincontent”）.toggle（）；
});
$（“#myform”）。验证({
调试：错误，
规则：{
idnumber:“必需”，
},
信息：{
idnumber:“请输入您的PIN”，
},
submitHandler:函数（表单）{
$（“#pincontent”）.hide（）；
//为有效的表单做其他事情
$.post（'process.php'，$（“#myform”）.serialize（），函数（数据）{
$（'#results'）.html（数据）；
});
}
});
});

您好，您的任何示例都不起作用。im使用code.jquery.com/jquery-latest.js">. 它们都按照我的问题中的描述工作，但是一旦我提交了表单，单击功能仍然不会切换，除非我刷新页面。嗨，你的示例无法工作。它的工作原理如我的问题中所述，但一旦我提交了表单，点击功能仍然不会切换，除非我刷新页面，我觉得很愚蠢。非常感谢你，我应该学会多睡觉。别担心：）匈牙利有句谚语：只有不犯错的人，不工作的人：）（通常，我做了4年的php开发人员，但有时我也会犯同样的错误）我真的建议，避免在php中使用HTML代码。HTML代码的位置是模板。

echo'<strong>Printer PIN:</strong>&nbsp;<a id="pinlink"><img src="images/edit.png" width="18px" height="18px" title="Edit you PIN number"></a>

<div id="results"></div>

<div id="pinnumber">'.$learner->idnumber.'</div>                 

<div id="pincontent" style="display:none;">
<form name="myform" id="myform" method="POST" enctype="multipart/form-data">  
<input type="text" name="idnumber" id="idnumber" placeholder="Enter your new PIN" size="20" value=""/>
<input name="id" type="hidden" value="'.$learner->id.'" />      
<input type="submit" name="submit" value="Update"> 
</form>
<div>';


$(document).ready(function(){

    $("#pinlink").click(function () {
    $("#pincontent").toggle();
    });

    $("#myform").validate({
        debug: false,
        rules: {
            idnumber: "required",
        },
        messages: {
            idnumber: "Please enter your PIN",
        },
        submitHandler: function(form) {
            $("#pincontent").hide();
            // do other stuff for a valid form
            $.post('process.php', $("#myform").serialize(), function(data) {
                $('#results').html(data);
            });
        }
    });
});