0

我正在尝试让 JQuery 更改 div 标签的内容，使其看起来像用户正在浏览多个页面。我的方式是用户将点击一个按钮，一旦他们点击该按钮，脚本将运行并更改 div 的内容。我希望至少有三页这样完成，但是在第二页之后我遇到了问题。这是我在脚本中的内容：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function() {

$("#1").click(function() {
$("#leftPart").html('<input type="text" id="blash" value="blash" name="blash" ><input type="text" id="hello" value="hello" name="hello" ><input type="text" id="world" value="world" name="world" ><input type="button" name="submit" id="2" value="Submit" />');
$("#rightPart").html('');
});

$("#2").click(function() {
$("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >');
});
});

因此，一旦我单击第一页上的按钮，ID 为“1”，它就会将屏幕更改为第二页应显示的内容。第二页将显示一些内容并创建另一个 ID 为“2”的按钮。然后，当我尝试单击第二页中的按钮时，ID 为“2”，它什么也没做。有什么帮助吗？是因为按钮是用脚本创建的，而不是实际在 html 中？

4

5 回答 5

2

那是因为id="2" 的按钮是绑定click事件后制作的，所以除非重新绑定click事件，否则不会检测到这个新按钮。更好的选择是使用 on() 而不是 click() 这将自动执行此操作。

$(document).ready(function() { 

    $("#1").on('click', function() { 
        $("#leftPart").html('<input type="text" id="blash" value="blash" name="blash" ><input type="text" id="hello" value="hello" name="hello" ><input type="text" id="world" value="world" name="world" ><input type="button" name="submit" id="2" value="Submit" />'); 
        $("#rightPart").html(''); 
    }); 

    $("#2").on('click', function() { 
        $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >'); 
    }); 

});
于 2012-06-12T12:59:58.077 回答
1

这是因为您正在动态创建按钮。您需要使用.on()来委托单击事件。 #2dom 准备好时不会创建按钮，这就是它不起作用的原因。'body' 可以替换为所选按钮的任何父元素。此外，您不应该使用数字作为 ID，因为它们是无效的

$('body').on('click','#2',function(){
于 2012-06-12T13:01:08.497 回答
1

改变这个

$("#2").click(function() {
    $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >');
});

到

$(document).on('click',"#2",function() {
   $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >');
});

数值不是有效的 id，请使用有效的 id。

于 2012-06-12T13:01:13.020 回答
0

是的。这是因为在将事件附加到网页时，DOM 中不存在按钮“2”。

尝试使用

您还可以参考'动态创建元素的事件绑定？'更多。

于 2012-06-12T12:59:36.673 回答
0

你是对的，因为它是动态创建的。你可以.on用来避免这个问题

改变你的代码：

$("#2").click(function() {
$("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >');
});
});

到

$("#leftPart").on("click","#2",function() {
  $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input            type="text" id="glomp" value="glomp" name="glomp" >');
});

这将确保leftPart现在和将来具有 id 2 的任何元素都将具有上述事件处理程序

于 2012-06-12T12:59:38.497 回答