將事件處理程序添加到不存在的類中？

Question

我見過與不存在的元素有關的問題，但與不存在的類無關。 這就是我想要做的。 單擊“ 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");

});

}）

Answer 1

.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) {
    ...
});

Answer 2

合並2個處理程序，並在更改類之前，先通過hasClass()找出版本是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 */
    }

});