Javascript 切换偶尔工作的事件

问题是单次单击该切换不起作用。当我多次单击时，它会工作，但行为似乎是随机的。我不确定我的代码出了什么问题

$(document).ready(function() {

 $('#mark-btn').click(function(){
       $.ajax({
         type: 'PUT',
         url:'<%= mark_exam_question_path(params[:exam_id], params[:id])%>'
       }).done(function(msg){

           $("#mark-btn").val("Marked");
           $("#mark-btn").attr("id",'unmark-btn' )
           return false        
   });

  $("#unmark-btn").click(function(){
       $.ajax({
       type: 'PUT',
       url:'<%= unmark_exam_question_path(params[:exam_id], params[:id])%>'
       }).done(function(msg){

     $("#unmark-btn").val("Mark");
     $("#unmark-btn").attr("id",'mark-btn' ); 
        return false
     });
   });
  });

});

$（文档）.ready（函数（）{
$（'#标记btn'）。单击（函数（）{
$.ajax({
键入：“PUT”，
url:“”
}).done（函数（msg）{
美元（“#标记btn”）.val（“标记”）；
$（“标记btn”）.attr（“id”，“取消标记btn”）
返回错误
});
$（“#取消标记btn”）。单击（函数（）{
$.ajax({
键入：“PUT”，
url:“”
}).done（函数（msg）{
$（“取消标记btn”）.val（“标记”）；
$（“取消标记btn”）.attr（“id”，“标记btn”）；
返回错误
});
});
});
});

在这一行 $（“标记btn”）.attr（“id”，“取消标记btn”）

---

尝试添加一个冒号；最后。在返回错误语句的末尾。

您不应该动态更改ID，但要使其正常工作，请使用选择器使用

on

的延迟语法

这是通过附着到一个元素来实现的，该元素将粘住、捕捉单击事件并在单击时过滤目标：

$（文档）.ready（函数（）{
$（文档）。在（'单击'，'标记btn'，函数（）{
$.ajax({
键入：“PUT”，
url:“”
}).done（函数（msg）{
美元（“#标记btn”）.val（“标记”）；
$（“标记btn”）.attr（“id”，“取消标记btn”）
返回错误
});
});
$（文档）。在（'单击'，“#取消标记btn”，函数（）{
$.ajax({
键入：“PUT”，
url:“”
}).done（函数（msg）{
$（“取消标记btn”）.val（“标记”）；
$（“取消标记btn”）.attr（“id”，“标记btn”）；
返回错误
});
});
});

您应该更改类或其他属性，而不是id

注意，执行JQuery“ready”的首选方法现在只是

$（function（）{…}）非
$（文档）.ready（函数（）{…}）

注意，正如Arun p Johny指出的，嵌套也是不正确的。我在这里也删除了这个错误，并将为此投票给他。
您需要使用事件委派，因为您正在使用动态id来区分要执行的处理程序

此外，如果可以多次调用事件处理程序，则不应在另一个事件处理程序中注册它

$(document).ready(function () {

    $(document).on('click', '#mark-btn', function () {
        $.ajax({
            type: 'PUT',
            url: '<%= mark_exam_question_path(params[:exam_id], params[:id])%>'
        }).done(function (msg) {

            $("#mark-btn").val("Marked");
            $("#mark-btn").attr("id", 'unmark-btn')
            return false
        });

    });

    $(document).on('click', "#unmark-btn", function () {
        $.ajax({
            type: 'PUT',
            url: '<%= unmark_exam_question_path(params[:exam_id], params[:id])%>'
        }).done(function (msg) {

            $("#unmark-btn").val("Mark");
            $("#unmark-btn").attr("id", 'mark-btn');
            return false
        });
    });

});

$（文档）.ready（函数（）{
$（文档）。在（'单击'，'标记btn'，函数（）{
$.ajax({
键入：“PUT”，
url:“”
}).done（函数（msg）{
美元（“#标记btn”）.val（“标记”）；
$（“标记btn”）.attr（“id”，“取消标记btn”）
返回错误
});
});
$（文档）。在（'单击'，“#取消标记btn”，函数（）{
$.ajax({
键入：“PUT”，
url:“”
}).done（函数（msg）{
$（“取消标记btn”）.val（“标记”）；
$（“取消标记btn”）.attr（“id”，“标记btn”）；
返回错误
});
});
});
您正在动态更改ID（非常糟糕）。使用附加到文档或正文上的
延迟语法（使用选择器），而不是
单击
。对于状态更改，您应该使用类或其他属性而不是id。HTML代码会有所帮助，或者更好的是使用JSFIDLE。您可以解释一下“如果可以多次调用事件处理程序，则不应在另一个事件处理程序中注册它”的含义吗？在您的代码中，
#取消标记btn
单击处理程序在
#标记btn
处理程序中注册。。。因此，让我们来看一个例子，点击
标记btn
，然后再次
取消标记
，然后
标记
。。。现在有两个单击处理程序注册到
unmark
按钮，导致在单击
unmark
时发送两个ajax请求again@TrueBlueAussie查看格式化代码，第二次单击在第一次单击中注册了handlerAh crud。。。该死的+为了发现额外的问题。我已经修改了答案，把它也包括进去，并且投票给了你。@eNddy看看你是否多次点击按钮，看看你能看到的控制台。。。对于一致性，修复为True，但在块内的最后一条语句上通常不需要。问题是事件连接到尚不存在的元素。
$(document).ready(function () {

    $(document).on('click', '#mark-btn', function () {
        $.ajax({
            type: 'PUT',
            url: '<%= mark_exam_question_path(params[:exam_id], params[:id])%>'
        }).done(function (msg) {

            $("#mark-btn").val("Marked");
            $("#mark-btn").attr("id", 'unmark-btn')
            return false
        });

    });

    $(document).on('click', "#unmark-btn", function () {
        $.ajax({
            type: 'PUT',
            url: '<%= unmark_exam_question_path(params[:exam_id], params[:id])%>'
        }).done(function (msg) {

            $("#unmark-btn").val("Mark");
            $("#unmark-btn").attr("id", 'mark-btn');
            return false
        });
    });

});