отправить форму без обновления страницы - функция щелчка () не работает после отправки

Question

У меня есть форма, которая обрабатывает без обновления страницы, она прекрасно работает, сохраняет в БД и т. Д.

Но как только я отправил форму, функция щелчка ниже не будет переключаться, пока я не обновлю страницу.

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

Вы пробовали с bind?

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

Answer 3

Можете ли вы обновить до последней версии jQuery?Мне интересно, будет ли новый метод on () работать лучше, чем click () ..?

Использование:

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

Или лучше:

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

Эта вторая форма использует то, что называется делегированием событий, что может помочь в этой ситуации, так как обработчик кликов, кажется, становится несвязанным после ответа AJAX ...

Если вы не можете выполнить обновление, попробуйте использовать делегат() метод вместо:

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