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无关。

问题是，在加载文档时（在DOM就绪），click（）函数会附加到HTML。但是，那时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>');
  });
});

也就是说，您想要的功能更简单的方法就是在两个已存在的div上使用hide()和show()。

Answer 2

首先，您的问题与AJAX无关。这是纯粹的JavaScript。您在上面定义的onClick侦听器绑定到页面加载时的相应元素（特别是DOM Ready事件）。当页面加载时，没有id =“hello”的元素，因此它不会使侦听器绑定到它。

您需要做的是在id =“result”的click事件中嵌入id =“hello”的侦听器绑定

e.g。

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

Answer 3

这是因为您在文档就绪中设置的具有id="hello"的元素的click事件处理程序不会绑定到该元素，因为在单击id="test"的元素之前它不存在于DOM中

解决此问题的一种方法是使用事件委派和live()命令。

另一种方法是在将元素添加到DOM的同时定义click事件处理程序。以下内容在此方案中可以正常工作

$(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>');
            // to prevent event propagation
            return false;
        });
    // to prevent event propagation
    return false;    
    });      
});

有一些特定的jQuery命令用于将元素附加到其他元素，在这种情况下运行良好的元素是append()和appendTo()。这是使用appendTo()

的示例

$(function() {
  $('#test').click(function() {

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

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

3 个答案: