Question

问题是单击时切换不起作用。它可以在我点击多次时起作用，但行为似乎是随机的。我不确定我的代码有什么问题。

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

});

Answer 1

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

这可以通过附加到一个元素来附加，捕获click事件，并在单击时过滤目标：

$(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指出的那样，嵌套也是不正确的。我也在这里删除了这个错误，并且会为此提供支持。

Answer 2

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

});

Answer 3

在这一行 $（“＃mark-btn”）。attr（“id”，“unmark-btn”）

尝试添加冒号;在末尾。并在你返回虚假陈述的最后。

切换事件偶尔工作

3 个答案: