[英]Adding event handler to non-existent class?
I've seen questions that relate to non-existent elements, but not non-existent classes. 我见过与不存在的元素有关的问题,但与不存在的类无关。 Here's what I want to do. 这就是我想要做的。 When a button of class "see_answer" is clicked, I want to remove the class and replace it with "see_question". 单击“ see_answer”类的按钮时,我想删除该类并将其替换为“ see_question”。 However, my click function for a button, once its class is "see_question", is not running. 但是,一旦按钮的类为“ see_question”,我的单击功能就无法运行。 I have tried $(document).on("click", ".see_question", function(event )
and I have tried $(".see_question").on("click", function(event) {etc...
. Thanks for the help! My code is below: 我试过$(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");
});
}) })
Click handling for .see_question
elements is delegated to document
. .see_question
元素的单击处理委托给document
。 For .see_answer
elements, a click handler is attached directly. 对于.see_answer
元素,直接附加了点击处理程序。 Therefore, swapping the class names will have an undesirable effect. 因此,交换类名将产生不良影响。
see_answer
is in force, a click will trigger the "see_answer" handler. 当see_answer
有效时,单击将触发“ see_answer”处理程序。 see_question
is in force, a click will trigger the "see_question" handler AND the "see_answer" handler, which is still attached . 有效执行see_question
时,单击将触发“ see_question”处理程序和仍附加的“ see_answer”处理程序。 There's a number of ways to do this properly. 有多种方法可以正确执行此操作。 From where you currently are, the simplest solution is to delegate click handling of .see_question
and .see_answer
elements to document
. 从当前位置出发,最简单的解决方案是将.see_question
和 .see_answer
元素的单击处理委托给document
。
$(document).on("click", ".see_answer", function(event) {
...
});
$(document).on("click", ".see_question", function(event) {
...
});
Combine the 2 handlers and figure out which version it is by hasClass()
before you change the classes around 合并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 */
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.