jQuery的单击按钮不起作用

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_bnt类，但您的click事件绑定到ajax_btn 。

在您的.click事件中引发alert('hello') ，以确保被点击。 此外，您还需要防止通过.preventDefault()进行提交。 例如，：

$('.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”。 也最好将您的输入类型=“提交”更改为输入类型=“按钮”。

希望能帮助到你