可能使用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标签？

回答

相关问题