可能使用JQuery .html（）可點擊創建div標籤？

嘿傢伙有點奇怪的問題，但如果我使用jQuery .html（）添加div標籤，並給他們一個ID我可以使用.click他們？代碼可能解釋我正在嘗試做什麼。如果不是有可能的解決方法？可能使用JQuery .html（）可點擊創建div標籤？

我正在嘗試動態更改我的網站而無需轉到新網站。

所以，如果我創建一個ID與Div。

$("#funTime").click(function(){ 
    var htmls = $("#content2").html(); 
    $("#content2").html(htmls + " <div id='button1'>Create</div><div id='button2'>Annimate</div><div id='button4'>Clear</div>"); 
}); 

$("#button1").click(function(){create();}); 
$("#button2").click(function(){forannimation();}); 
$("#button3").click(function(){createOnMouse();});

它不起作用，但我不知道爲什麼。

在此先感謝。

來源

2013-01-06 recneps

避免附加元素。這使您的文件無效。 – undefined

您只能將事件處理程序分配給存在的元素。因此，處理的分配應做後創作的元素：

$("#funTime").click(function(){ 
    var htmls = $("#content2").html(); 
    $("#content2").html(htmls + " <div id='button1'>Create</div><div id='button2'>Annimate</div><div id='button4'>Clear</div>"); 

$("#button1").click(function(){create();}); 
$("#button2").click(function(){forannimation();}); 
$("#button3").click(function(){createOnMouse();}); 
});

然而，幾個電話點擊funtime將導致使用相同的ID，這將導致一個無效的文檔中的幾個要素。防止重複的ID（例如實施計數器）或使用類。

來源

2013-01-06 21:16:10 Zeta

不一定，使用'.on（）'在其委託表單甚至在現有的或動態添加的元素之前執行該操作......請參閱PeeHaa的回答 – JFK

不，您需要.on()才能夠處理動態添加的元素。

$('#content2').on('click', '#button1', function() { 
    // do your stuff 
});

另請注意，您只能將具有特定ID的單個元素添加到DOM。在你的示例中，每當單擊具有ID #funTime的元素時，都會使用相同的ID添加en元素。

您可以通過向DOM添加帶有某個類的按鈕而不是ID的按鈕或使用計數器來生成唯一的ID來改善您的代碼。或者通過根據您的需要使用.one()來防止其他點擊#funTime。

來源

2013-01-06 21:14:20 PeeHaa

如果你的例子使用$（'＃funTime'），那會更好。（'點擊'...）{}而不是文件，但答案是現貨。 +1 –

不是絕對正確的...... OP在追加到DOM之後添加處理程序，因此在運行代碼時存在元素 – charlietfl

@charlietfl OP在追加到DOM後沒有添加處理程序，DOM在點擊#funTime –

實際上，您可以在屏幕上創建元素，將事件綁定到它們。骨幹和其他人也是這樣。

var myNewDiv = $("<div ...>"); 
myNewDiv.click(function(){}); 
$(something).append(myNewDiv);

如果您想要將事件添加到尚未在頁面上的事物中，您必須使用jQuery委託。

來源

2013-01-06 21:16:55

雖然這是真的，但您無法將它們綁定到創建它們之前。 – Zeta

但您可以在將它們附加到其他事物之前將其綁定......如果您想爲尚未創建的元素執行事件，則必須進行委派。我會將其添加到我的答案中。 –

您應該（）監聽器使用的動態添加元素

$("#content2").on('click','#button1',function(){create();});

這將添加一個監聽器來檢查所選容器現場添加按鈕（＃內容2）

來源

2013-01-06 21:17:49 jtheman

做添加thehandler因爲創建元素需要在添加元素之後將其添加到點擊處理程序中....否則需要使用代理方法，如on()

這將工作：

$("#funTime").click(function(){ 
    var htmls = $("#content2").html(); 
    $("#content2").html(htmls + " <div id='button1'>Create</div><div id='button2'>Annimate</div><div id='button4'>Clear</div>"); 
    /* elements exist can add event handlers*/ 
    $("#button1").click(function(){create();}); 
    $("#button2").click(function(){forannimation();}); 
    $("#button3").click(function(){createOnMouse();}); 

});

多見目前的做法是使用委派，允許未來的元素，可以在頁面加載運行具有相同的ID

來源

2013-01-06 21:21:19 charlietfl

可能使用JQuery .html（）可點擊創建div標籤？

回答

相關問題