Question

所以我正在使用Object.create克隆方法制作一个面向对象JS的小测验应用程序。我有一个ol，以及一个名为showVals（）的函数，用lis填充它。这似乎工作正常。我遇到的问题是：我的li单击函数给出“.selected”类的attr似乎是正常工作，但是在我点击继续并调用qn2.showVals（）之后，它不再给lis了单击时选择的类。

qn2的数据就在那里。一切看起来都很正常，除了点击功能不再有效（给lis这个类）。

$(document).ready(function(){
qn1.showVals();
qn1.setAns(1); // calling question1 answer for now

$('li').click(function(){
$('li').removeAttr("class");
$(this).attr({"class": "selected"});
});

$('.proceed').click(function(e){
    e.preventDefault();
    if ($('.selected').html() == qn1.ctAns) {
     if (confirm("You are correct")){
    qn2.showVals();
    qn2.setAns(3);
    };
    };
});

});

var qn1 = {
title:"The Mouth of Sauron",
qn: "How did 'The mouth of Sauron' meet his demise?",
img: "images/mouth-sauron.gif",
ans: ["Shot in the back", "Beheaded", "Drowned in a swamp", "Sacrificed"],
setAns: function(x) {
    this.ctAns =  this.ans[x]; //setting correct answer
},
showVals: function(){

    $('#slide-title').text(this.title);

    $('.question-box > p').text(this.qn);

    $('#obj-img').attr("src", this.img);

    $('ol').html('<li>'+this.ans[0]+'</li>'+'<li>'+this.ans[1]+'</li>'+
    '<li>'+this.ans[2]+'</li>'+'<li>'+this.ans[3]+'</li>')
   }
}

var qn2 = Object.create(qn1);
qn2.title = "Golemn";
qn2.qn = "What this dude's name?";
qn2.ans= ["Golemn", "Gimli", "Goober", "Poop"]
qn2.img = "images/golemn.gif";

Answer 1

这可能是因为您的li元素是动态添加的。您应该尝试使用jQuery on()，它允许您将事件处理程序绑定到DOM中必须已存在的父元素，然后您可以指定将调用事件处理程序的子/后代选择器。在执行事件绑定时，此子元素可能仍然不存在。在这种情况下，你可以调用on（），如：

$('ol').on('click', 'li', function () {...});

ol已经存在。

或者，您可以将点击处理程序绑定到动态生成的li元素后，将它们添加到DOM中。虽然我认为这会耗费更多的处理器时间，因为我认为您必须为所有测验问题执行此操作，而是询问您的用户。

更改元素值后，为什么我的jquery click函数不起作用？

1 个答案: