Question

我有这个形式女巫包含一个隐藏的字段和一个函数内部的按钮，我想触发ajax db删除但我似乎无法使其工作。

        $this->_calendar .= '<td class="user_data" id="'. $data[0]->id .'" style="background-color: '. $color[0]->color .';">

        <div class="userbox" id="'.$data[0]->id.'">
            <form action="schedule.php?page=management&ajax=true" method="post">
                <input type="hidden" name="id" value="'. $data[0]->id .'">
                <input type="submit" name="remove_entry" value="x" class="ajax_bnt" style="vertical-align:bottom;overflow:visible; font-size:1em; display:inline;  margin:0; padding:0; border:0; border-bottom:1px solid blue; color:blue; cursor:pointer;">
            </form>
        </div>

        </td>';

这是js文件

$(document).ready(
function () {

    $('.ajax_btn').click( function() {

        $.post("schedule.php?page=management&ajax=true", { id : $('#id').val() }, function (data) {
            $('#remove_feedback').html(data);
        }
    );

    });

});

问题是，当我点击“x”按钮时，它不会触发jquery代码，而是使用普通方法处理它。

你们有什么建议吗？我正努力绕着js部分工作，但我遇到了这个障碍。

Answer 1

您的提交按钮包含课程ajax_bnt但您的点击事件已绑定到ajax_btn，对于初学者来说。

在你的.click事件中加入alert('hello')以确保它被击中。此外，您需要阻止提交通过.preventDefault()。。e.g，：

$('.ajax_btn').click( function(ev) {
    ev.preventDefault();
    alert("is this being called?");
    $.post("schedule.php?page=management&ajax=true", { id : $('#id').val() }, function (data) {
        $('#remove_feedback').html(data);
    }
);

Answer 2

您需要在return false;之后添加$.post();才能停止提交表单。

Answer 3

您的html中看起来有拼写错误。 ajax_bnt应为ajax_btn：

<input type="submit" name="remove_entry" value="x" class="ajax_btn" style="vertical-align:bottom;overflow:visible; font-size:1em; display:inline;  margin:0; padding:0; border:0; border-bottom:1px solid blue; color:blue; cursor:pointer;">

Answer 4

将输入从type =“submit”更改为type =“button”

<input type="button" name="remove_entry" value="x" class="ajax_btn" style="vertical-align:bottom;overflow:visible; font-size:1em; display:inline;  margin:0; padding:0; border:0; border-bottom:1px solid blue; color:blue; cursor:pointer;">

Answer 5

如果你想使用ajax只提交，那么改变

<form action="schedule.php?page=management&ajax=true" method="post">

到

<form method="post">

或

<form action="javascript:void(0)" method="post">

并且不要忘记修改你的类名，因为它拼写“ajax_bnt”。最好将输入类型=“submit”更改为input type =“button”。

希望有所帮助

jquery点击按钮不起作用

5 个答案: