事件处理程序不适用于创建的元素

Question

好吧,标题可能没有任何意义..但无论如何,我可以用一些简单的代码来澄清它.

我正在使用JQuery 1.3.2

这是我的JS

$(document).ready(function() {
  $('#test').click(function() {
    $('#result').html('<a href="#" id="hello">hello world</a>');
  });

  $('#hello').click(function() {
    $('#result').html('<a href="#" id="asdf">Test #2</a>');
  });
});

在html中,我有一个超链接id ='test'和一个id ='result'的div.我期望这个JS代码是当我点击测试时,它显示"Hello World".之后,当我点击"Hello World"时,它应该显示"Test#2"

任何建议都非常有帮助......

谢谢.

Answer 1

正如hobodave所说,这与Ajax无关.

问题是click()函数在加载文档时附加到HTML(在DOM就绪).但是,那时Hello world div还不存在.创建时,它没有单击事件.

您需要的是在添加新div时添加click(),或者使用该 live()函数附加事件处理程序.

$(document).ready(function() {
  $('#test').live('click',function() {
    $('#result').html('<a href="#" id="hello">hello world</a>');
  });

  $('#hello').live('click',function() {
    $('#result').html('<a href="#" id="asdf">Test #2</a>');
  });
});

这就是说,你想要的功能,一种更简单的方法就是使用hide()和show()两个已经存在的div.