JQuery更改內容

我試圖讓JQuery更改div標籤的內容，以便它看起來像用戶正在經歷多個頁面。我擁有它的方式是，用戶將點擊一個按鈕，一旦他們點擊按鈕腳本將運行並更改div的內容。我希望至少有三頁這樣做，但我在第二頁後遇到問題。這裏是我的腳本：JQuery更改內容

<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" >'); 
}); 
});

所以一旦我點擊按鈕的第一頁上，與「1」的ID，然後它改變了屏幕的第二頁應該顯示的內容。第二頁將顯示一些東西，並創建另一個ID爲'2'的按鈕。然後，當我嘗試點擊第二頁上的按鈕（ID爲「2」）時，它不會執行任何操作。任何幫助？是因爲按鈕是用腳本創建的，而不是實際在html中？

來源

2012-06-12 user1399078

HTML不允許使用數字ID，您應該更改它們，例如到'page1'。 – iappwebdev

@Simon：HTML5和大多數瀏覽器都可以處理它。儘管如此，不知何故;） –

好吧，壞評論。這裏又一次：W3C標準HTML約定不允許它：http://www.w3.org/TR/html4/types.html#type-name – iappwebdev

這是因爲id =「2」的按鈕是在綁定到click事件之後創建的，所以這個新按鈕並不是det除非你重新綁定了點擊事件。更好的選擇是使用click（）的on（）方法，這將自動執行此操作。

$(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-12 12:59:58 Viezevingertjes

'.on'的（function（）'語法''（「＃2」）。將不會用於將來的元素，它就像'.click'。正確語法是'$（Static_parent）.on（event，selector，callback）;'。 –

工作得很好，據我所知我們總是這樣使用它 – Viezevingertjes

我很抱歉，它會在' 2'在被調用之前被添加，但是在那種情況下不會爲動態添加的元素工作，你必須使用'$（docu （'click'，'＃2'，function（）'語法。 –

是的。這是因爲在事件附加到網頁時，按鈕'2'不存在於DOM中。

嘗試使用

.live(events, handler(eventObject))
.on(events [, selector] [, data] , handler(eventObject))
或者如果你正在使用jQuery

您也可以參考 'Event binding on dynamically created elements?' 的舊版本更多的授權。

來源

2012-06-12 12:59:36 Playmaker

.live已棄用，所以你應該使用它 –

它已被棄用，所以你'應該'使用？那裏有一個錯字嗎？ – Playmaker

是的，我忘記了它不應該（應該在這裏我應該）說不應該使用它（因爲它已被棄用） –

你是對的，因爲它是動態創建的。您可以使用.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-12 12:59:38

'.on'的語法不正確。 –

@Joy你是什麼意思？我沒有在任何地方寫'$ .on' –

我的意思是你以前的語法'$（「＃leftPart」）。on（「＃2」，「click」，function（）'是不正確的。修正了語法。 –

這是因爲您正在動態創建按鈕。您需要使用.on()委派單擊事件。 #2當dom準備就緒時不會創建按鈕，這就是爲什麼它不起作用。 'body'可以被所選按鈕的任何父元素替代。此外，你不應該使用數字作爲ID的，因爲它們是無效的

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

來源

2012-06-12 13:01:08

改變這種

$("#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，使用有效的身份證件。

來源

2012-06-12 13:01:13

JQuery更改內容

回答

相關問題