1

嘿家伙有点奇怪的问题，但如果我使用 JQuery .html() 添加 div 标签并给他们一个 ID，然后我可以使用 .click 他们吗？该代码可能会解释我想要做什么。如果没有，是否有可能的解决方法？

我正在尝试动态更改我的网站而不去新网站。

因此，如果我创建带有 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();});

它不起作用，但我不知道为什么。

提前致谢。

4

5 回答 5

4

不，您需要.on()能够处理动态添加的元素。

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

另请注意，您只能将具有特定 id 的单个元素添加到 DOM。在您的示例中，每次单击具有 id 的元素时，#funTime您都会添加具有相同 id 的元素。

您可以通过向 DOM 添加带有某个类而不是 id 的按钮或使用计数器来生成唯一 id 来改进您的代码。或者根据您的需要#funTime通过使用来防止其他点击。.one()

于 2013-01-06T21:14:20.343 回答
3

您只能将事件处理程序分配给存在的元素。所以处理程序的分配应该在创建元素之后完成：

$("#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-06T21:16:10.023 回答
1

您实际上可以创建元素，将事件绑定到它们，所有这些都在它们出现在屏幕上之前。Backbone 和其他人也采用这种方式。

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

如果您想向页面上尚未出现的内容添加事件，您必须使用 jQuery 委托。

于 2013-01-06T21:16:55.120 回答
1

您应该对动态添加的元素使用 on() 侦听器

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

这将添加一个侦听器以检查所选容器中的实时添加按钮 (#content2)

于 2013-01-06T21:17:49.253 回答
1

要在创建元素时添加处理程序，需要在添加元素后立即在单击处理程序中添加它......否则需要使用委托方法，如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();});

});

当前更常见的做法是使用允许未来元素并且可以在页面加载时运行的委托

于 2013-01-06T21:21:19.183 回答