正在将事件处理程序添加到不存在的类

Adding event handler to non-existent class?

本文关键字：不存在 添加 程序 事件处理      更新时间：2023-09-26

我看到一些问题与不存在的元素有关，但与不存在类无关。这是我想做的。当点击类"see_answer"的按钮时，我想删除该类并将其替换为"see_question"。然而，我的按钮点击功能，一旦它的类是"see_question"，就不会运行。我试过$(document).on("click", ".see_question", function(event )和$(".see_question").on("click", function(event) {etc...。谢谢你的帮助！我的代码如下：

$(document).ready(function() {
// initialize variables
var lang = "javascript";
var qno = 1;
var prevText;       // holds question/answer
var language = lang + ".html";

// set up tabs, and keep track of which one is clicked
$("#myTabs").tabs({
    activate: function (event, ui) {
        var active = $("#myTabs").tabs("option", "active");
        lang = $("#myTabs ul > li a").eq(active).attr("href"); 
        lang = lang.replace("#", "");
    }
});
/* REMINDERS
    actual qa part: blah_language
*/
// set up question
$.ajax({
    url: language,
    dataType: "html",
    success: function(data) {
    $("#blah_"+lang)
    .text($(data).find("#1").text());
    },
    error: function(r) {
        alert("whoops, error in initialization");
    }
});

$(".next_question").on("click", function(event) {
    event.preventDefault();
    var id = $(this).attr("id").replace("next_question_", "");
    var language = id + ".html";
    var doc = "#blah_" + id;
    $.ajax({
        url: language,
        dataType: "html",
        success: function(data) {
            var num = "#" + qno;
            $(doc)
            .text($(data).find(num).text());
            qno = qno + 1;
        },
        error: function(r) {
            alert("whoops");
        }
    });
    prevText = "";
});

// SHOW ANSWER
$(".see_answer").on("click", function(event) {
    event.preventDefault();
    var id = $(this).attr("id").replace("see_answer_", "");
    var prev = "#blah_" + id;
    var answers = id + "_answers.html";

    // Save the question
    prevText = $(prev).text();
    var obj = $(this);
    $.ajax({
        url: answers,
        dataType: "html",
        success: function(data) {
            var num = "#" + 3;
            $(prev)
                .text($(data).find(num).text());
        },
        error: function(r) {
            alert("whoops");
        }
    });
    obj.val("See Question");
    obj.removeClass("see_answer");
    obj.addClass("see_question");
    event.stopPropagation();
});
$(document).on("click",".see_question",  function(event) {
    event.preventDefault();
        obj = $(this);
    event.preventDefault();
    var id = $(this).attr("id").replace("see_answer_", "");
    var prev = "#blah_" + id;
    $(prev).text(prevText);
    obj.val("See Answer");
    obj.removeClass("see_question");
    obj.addClass("see_answer");
});

})

.see_question元素的点击处理委托给document。对于.see_answer元素，将直接附加一个单击处理程序。因此，交换类名会产生不良影响。

  • 当see_answer生效时，单击将触发"see_answer"处理程序
  • 当see_question生效时，单击将触发"see_question"处理程序和"see_answer"处理程序，，该处理程序仍附加

有很多方法可以正确地做到这一点。从目前的情况来看，最简单的解决方案是将.see_question和.see_answer元素的单击处理委托给document。

$(document).on("click", ".see_answer", function(event) {
    ...
});
$(document).on("click", ".see_question", function(event) {
    ...
});

在围绕更改类之前，组合这两个处理程序，并通过hasClass()确定它是哪个版本

$(document).on("click", ".see_question, .see-answer", function(event ){
    var $btn =$(this), isAnswer = $btn.hasClass('see_answer'); 
    // we know which one it is so can switch classes now
    $btn.toggleClass('see_answer see_question');
    if(isAnswer){
      /* run code for answer version */
    }else{
       /* run code for question version */
    }
});
相关文章：