2

问题是切换不能通过单击来工作。当我多次点击时它可以工作，但行为似乎是随机的。我不确定我的代码有什么问题。

$(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
     });
   });
  });

});
4

3 回答 3

1

您不应该动态地更改 id，但要使其按原样工作，请on使用使用选择器的延迟语法。

这是通过附加到一个元素上来实现的，该元素会一直存在，捕捉点击事件，并在点击时过滤目标：

$(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
        });
    });
});

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

请注意，做 JQuery“准备”的首选方式现在$(function(){...});不是$(document).ready(function(){...});

请注意，正如 Arun P Johny 指出的那样，嵌套也是不正确的。我也在这里删除了这个错误，并将为此投票支持他。

于 2013-10-04T07:02:20.773 回答
1

您需要使用事件委托，因为您使用动态 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
        });
    });

});
于 2013-10-04T07:02:42.947 回答
0

在这一行 $("#mark-btn").attr("id",'unmark-btn' )

尝试添加一个冒号；在最后。并在您返回虚假陈述的最后。

于 2013-10-04T07:00:26.350 回答