JQuery脚本不能工作两次

Question

我正在尝试在网站页面中创建测验。目的是每次您按下一步时，页面内都会打开一个新问题。但是，第二次调用该脚本不起作用。

为此，我首先创建了一个名为“下一步”的链接。

<a href="addquiz.html" name="next" id="1">Next</a>

这需要一个从 addquiz.html 打开 q1 的脚本

<script>
$("#1").click(function() {
$("#load").load("addquiz.html" + ' #q1');
event.preventDefault();
});
</script>

在这个脚本中有一个提交按钮，它调用函数 goupone，它将链接的 id 增加 1（例如，从 1 到 2）

<div id="q1">
<h3>5 + 19 = ?</h3>
    <input type="text" width="6" name="" id="question-1-answers" value="" />
    <input type="submit" value="Check" onClick="goupone();" />
</div>

<script>
function goupone(){
var v=document.links[9].id;
vi=parseInt(v);
vi=vi+1;
document.links[9].id=vi;
}
</script>

但是，当我再次单击下一步按钮时，什么也没有发生。有人可以帮忙吗？

Answer 1

由于您将id 从1 更改为2，当您点击锚点时，初始点击处理程序$("#1").click() 将不再被触发。另一种方法是将事件处理程序绑定到属性name 为next 的a：

<script>
$('a[name="next"]').click(function() {
  $("#load").load("addquiz.html" + ' #q1');
  event.preventDefault();
});
</script>

或者创建一个类，比如next，将其添加到a，并将其用作选择器：

<a href="addquiz.html" name="next" id="1" class="next">Next</a>

<script>
$('a.next').click(function() {
  $("#load").load("addquiz.html" + ' #q1');
  event.preventDefault();
});
</script>

但是，我会重构您的整个代码以简单地使用以下代码：

<a href="addquiz.html" name="next" id="nextAnchor" data-next-id="1">Next</a>

<script>
$("#nextAnchor").on('click', function() {
  $("#load").load("addquiz.html#q" + $(this).data("next-id"));
  event.preventDefault();
});
</script>

function goupone() {
  var $next = $("#nextAnchor");
  var currentId = parseInt($next.data("next-id"));
  var nextId = currentId + 1;
  $next.data("next-id", nextId);
}

这是一个有效的DEMO。