我见过与不存在的元素相关的问题,但与不存在的类无关。这就是我想做的。当单击“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
元素的点击处理委托(delegate)给 document
。对于 .see_answer
元素,直接附加点击处理程序。因此,交换类名将会产生不良效果。
- 当
see_answer
生效时,点击将触发“see_answer”处理程序。 - 当
see_question
生效时,点击将触发“see_question”处理程序和“see_answer”处理程序,仍然附加。
有多种方法可以正确地做到这一点。从您当前的位置来看,最简单的解决方案是将 .see_question
和 .see_answer
元素的点击处理委托(delegate)给 document
.
$(document).on("click", ".see_answer", function(event) {
...
});
$(document).on("click", ".see_question", function(event) {
...
});
关于javascript - 将事件处理程序添加到不存在的类中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29524542/