На посте jQuery ничего не происходит

Question

Ниже приведена моя функция jQuery, которая используется для публикации значений имени, пароля и адреса электронной почты в register.php, а затем отображает сообщение, отображаемое в register.php в div#message.

Однако, когда я нажимаюpostBtn ничего не происходит, и консоль не регистрирует нажатие.

jQuery

$(document).ready(function() {
    $("#btnPost").on("click", function() {
        console.log('clicked'); 
        var thisBtn = $(this); 
        var parent = thisBtn.parent(); 

        name = parent.data('name'); 
        password = parent.data('password'); 
        email = parent.data('email');

        $.post(
            'register.php', 
            { 
                name: ('name'), 
                password: ('password'), 
                email: ('email')
            },          
            function(data) {
                parent.next('#message').html(data);
            }
        );
    });
});

Это блок HTML, в который вводятся все данные, однако, кажется, ничего не происходит, когданажата кнопка #postBtn.

<table>
    <tr>
        <td> Username: <td>
        <td> <input type = "text"  class = "field" name = "name"> </td>
    </tr>
    <tr>
        <td> Password: <td>
        <td> <input type = "password" class = "field" name = "password"> </td>
    </tr>
        <td > Email: <td>
        <td> <input type = "email" class = "field" name = "email"> </td>
    </tr>
    <tr>
        <td>  <td>
        <td> <button  class='regular' id = "btnPost" name='save'> Log In  </button></td>
    </tr>
    <tr>
</table>

Answer 1

Проверьте порядок файлов библиотеки jQuery, включенных в источник (HTML).Сначала файл библиотеки jQuery, а затем файл javascript.Кажется, ваш код работает нормально в jsfiddle.Одной из причин может быть то, что файл jQuery отсутствует или порядок загрузки может не совпадать.

Answer 2

Ваша проблема заключается в использовании .next(), который возвращает следующего брата текущего элемента.И поскольку вы передаете селектор, вы получите результат только в том случае, если следующий брат удовлетворяет селектору, иначе вы ничего не получите.Просто используйте $("#message"), поскольку #message - это не следующий брат после родительского элемента вашей кнопки.

$.post( 
    'register.php',  
    {  
        name: ('name'),  
        password: ('password'),  
        email: ('email') 
    },           
    function(data) { 
        $('#message').html(data); 
    } 
); 

Answer 3

У меня была похожая проблема с вами, используя тот же синтаксис, я переделал мою что-то по следующим направлениям, и это решило проблему ....

попробовать:

$(document).on("click", "#btnPost", function() { //implementation });

Вы можете изменить $(document) на имя содержащего элемента div или чего-то более низкого уровня, если в нем содержится #btnPost.