Question

我有一个没有页面刷新处理的表单，它工作得很好，保存到db等。

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

$("#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);
            });
        }
    });
});

非常感谢任何帮助。

Answer 1

好的，我发现错误，你忘了正确关闭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);
            });
        }
    });
});

Answer 2

您可以升级到最新版本的jQuery吗？我想知道新的on（）方法是否会更好地工作而不是click（）..？

使用：

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

或更好：

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

这第二种形式使用了一种称为事件委托的东西，这可能有助于这种情况，因为点击处理程序在AJAX响应之后似乎变得未绑定...

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

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

Answer 3

你试过绑定吗？

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

提交表单没有页面刷新 - 单击功能切换（）提交后无法正常工作

3 个答案: