在写一个答题页面，想实现点击选项后直接跳到下一题，目前只有第一个题有用，后面的不会走点击事件
$('.titles').empty()
//取出后端传过来的list值
var chargeRuleLogs = data
//对list值进行便利
var count = 0;
var option = new Array();
//渲染第一条数据
var child = "<div id='count'><div class='question'>" + chargeRuleLogs[count].question + "div>"
+ "<div><button type='button' id='a'>" + chargeRuleLogs[count].option_a + "button>div>"
+ "<div><button type='button' id='b'>" + chargeRuleLogs[count].option_b + "button>div>"
+ "<div><button type='button' id='c'>" + chargeRuleLogs[count].option_c + "button>div>"
+ "<div><button type='button' id='d'>" + chargeRuleLogs[count].option_d + "button>div>div>"
//将信息追加
$(".titles").append(child)
if (count < data.length) {
$('#top').click(function () {
var obj = document.getElementById('count')
obj.parentElement.removeChild(obj)
count = count - 1
if (count < 0) {
count = 0;
}
child = "<div id='count'><div class='question'>" + chargeRuleLogs[count].question + "div>"
+ "<div><button type='button' id='a'>" + chargeRuleLogs[count].option_a + "button>div>"
+ "<div><button type='button' id='b'>" + chargeRuleLogs[count].option_b + "button>div>"
+ "<div><button type='button' id='c'>" + chargeRuleLogs[count].option_c + "button>div>"
+ "<div><button type='button' id='d'>" + chargeRuleLogs[count].option_d + "button>div>div>"
//将信息追加
$(".titles").append(child)
}
);
$('#button').click(function () {
var obj = document.getElementById('count')
obj.parentElement.removeChild(obj)
count = count + 1
if (count > data.length - 1) {
count = data.length - 1
var t = document.getElementById('submit');//选取id为test的元素
t.style.display = 'inline';
}
child = "<div id='count'><div class='question'>" + chargeRuleLogs[count].question + "div>"
+ "<div><button type='button' id='a'>" + chargeRuleLogs[count].option_a + "button>div>"
+ "<div><button type='button' id='b'>" + chargeRuleLogs[count].option_b + "button>div>"
+ "<div><button type='button' id='c'>" + chargeRuleLogs[count].option_c + "button>div>"
+ "<div><button type='button' id='d'>" + chargeRuleLogs[count].option_d + "button>div>div>"
//将信息追加
$(".titles").append(child)
})
//点击选项a
$('#a').click(function () {
option[count] = 1
count = count + 1
console.log(option)
var obj = document.getElementById('count')
obj.parentElement.removeChild(obj)
//渲染条数据
child = "<div id='count'><div class='question'>" + chargeRuleLogs[count].question + "div>"
+ "<div><button type='button' id='a'>" + chargeRuleLogs[count].option_a + "button>div>"
+ "<div><button type='button' id='b'>" + chargeRuleLogs[count].option_b + "button>div>"
+ "<div><button type='button' id='c'>" + chargeRuleLogs[count].option_c + "button>div>"
+ "<div><button type='button' id='d'>" + chargeRuleLogs[count].option_d + "button>div>div>"
//将信息追加
$(".titles").append(child)
})
//点击选项b
$('#b').click(function () {
option[count] = 2
count = count + 1
console.log(option)
var obj = document.getElementById('count')
obj.parentElement.removeChild(obj)
//渲染条数据
child = "<div id='count'><div class='question'>" + chargeRuleLogs[count].question + "div>"
+ "<div><button type='button' id='a'>" + chargeRuleLogs[count].option_a + "button>div>"
+ "<div><button type='button' id='b'>" + chargeRuleLogs[count].option_b + "button>div>"
+ "<div><button type='button' id='c'>" + chargeRuleLogs[count].option_c + "button>div>"
+ "<div><button type='button' id='d'>" + chargeRuleLogs[count].option_d + "button>div>div>"
//将信息追加
$(".titles").append(child)
})
//点击选项c
$('#c').click(function () {
option[count] = 3
count = count + 1
console.log(option)
var obj = document.getElementById('count')
obj.parentElement.removeChild(obj)
//渲染条数据
child = "<div id='count'><div class='question'>" + chargeRuleLogs[count].question + "div>"
+ "<div><button type='button' id='a'>" + chargeRuleLogs[count].option_a + "button>div>"
+ "<div><button type='button' id='b'>" + chargeRuleLogs[count].option_b + "button>div>"
+ "<div><button type='button' id='c'>" + chargeRuleLogs[count].option_c + "button>div>"
+ "<div><button type='button' id='d'>" + chargeRuleLogs[count].option_d + "button>div>div>"
//将信息追加
$(".titles").append(child)
})
//点击选项d
$('#d').click(function () {
option[count] = 4
count = count + 1
console.log(option)
var obj = document.getElementById('count')
obj.parentElement.removeChild(obj)
//渲染条数据
child = "<div id='count'><div class='question'>" + chargeRuleLogs[count].question + "div>"
+ "<div><button type='button' id='a'>" + chargeRuleLogs[count].option_a + "button>div>"
+ "<div><button type='button' id='b'>" + chargeRuleLogs[count].option_b + "button>div>"
+ "<div><button type='button' id='c'>" + chargeRuleLogs[count].option_c + "button>div>"
+ "<div><button type='button' id='d'>" + chargeRuleLogs[count].option_d + "button>div>div>"
//将信息追加
$(".titles").append(child)
});
}
}
因为你的a,b,c,d的点击事件是绑定在第一题的a,b,c,d上的，第二题的a,b,c,d的点击事件不关他们的事，你应该用代理的方式进行事件监听
$(".titles").on('click', '#a', function(){
// 你的代码
})
另外，你的代码没发现大量相同的内容的，这些可以封装成一个函数
仅供参考：
通过jQuery append（或者before、after，一样）新添加进网页的元素，常用的事件不能触发，比如：append的id 为 abc 的元素，那么 $(#abc).click(function(){})是没有效果的。
解决方法：用on函数，要注意格式
正确格式： $("outerSelector").on('eventType','selector',function(){})；
outerSelector 是一个一直存在的DOM， selector是你要监听点击的节点；
例子：
$(function(){
$("form").on('click',"[class='image']",function(){
this.remove();
})
})