Question

我正在尝试让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中？

Answer 1

这是因为绑定到click事件后会生成id =“2”的按钮，除非重新绑定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" >'); 
    }); 

});

Answer 2

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

$('body').on('click','#2',function(){

Answer 3

更改此

$("#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。

Answer 4

是。这是因为在事件附加到网页时，DOM中没有按钮“2”。

尝试使用

.live( events, handler(eventObject) )
.on( events [, selector] [, data] , handler(eventObject) )
或委托，如果您使用的是旧版本的jQuery

您还可以参考“Event binding on dynamically created elements?”了解更多信息。

Answer 5

你是对的，因为它是动态创建的。您可以使用.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的任何元素都具有上述事件处理程序

JQuery更改内容

5 个答案: