使用'on'作为点击绑定到已经存在的元素。

对如

$('test').on('click',function(){
    alert('Test');
})

这将有所帮助。

您正在使用的click()绑定称为“直接”绑定，它只会将处理程序附加到已经存在的元素上。它不会与将来创建的元素绑定。为此，您必须使用on()创建一个“委托”绑定。

委托事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。

源

以下是你想要的:

Var计数器= 0; $("按钮").click(函数(){ 美元(h2)。追加(“< p class = '测试' >点击我”+(+ +计数器)+ " < / p > ") })； // on(): 美元(h2)。On ("click"， "p.test"， function(){ 警报($(这)。text ()); })； < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js " > < /脚本> < h2 > < / h2 > 生成新的元素</button>

以上内容适用于使用jQuery 1.7+版本的用户。如果你使用的是旧版本，请参考下面之前的答案。

之前的回答:

尝试使用live():

$("button").click(function(){
    $("h2").html("<p class='test'>click me</p>")
});   


$(".test").live('click', function(){
    alert('you clicked me!');
});

为我工作。尝试用jsFiddle。

或者用delegate()有一种新奇的方法:

$("h2").delegate("p", "click", function(){
    alert('you clicked me again!');
});

更新的jsFiddle。

我在jQuery的文档中找到了两个解决方案:

首先:在Body或Document上使用委托

例句:

 $("body").delegate('.test', 'click', function(){
 ...
  alert('test');
 });

Why?

答:根据一组特定的根元素，为现在或将来与选择器匹配的所有元素附加一个或多个事件处理程序。 链接:http://api.jquery.com/delegate/

第二步:将你的函数放在"$(document)"中，使用"on"并将它附加到你想要触发这个函数的元素上。 第一个参数是“事件处理器”，第二个参数是元素，第三个参数是函数。 例句:

 $( document ).on( 'click', '.test', function () {
 ...
  alert('test');
 });

Why?

Answer: Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next ... link: https://api.jquery.com/on/

另一种更简洁的方法(IMHO)是使用一个原始的javascript函数来响应一个on click事件，然后将目标元素传递回jQuery。这种方法的优点是你可以在任何地方动态地添加你的元素，点击处理程序将“正常工作”，你不需要担心把控制委托给父元素，等等。

步骤1:更新动态html以触发onclick事件。确保将'event'对象作为参数传递

    $("button").click(function() {
        $("h2").html("<p class='test' onclick='test(event)'> click me </p>")
    });

步骤2:创建测试函数以响应单击事件

    function test(e){
        alert();
    });

可选步骤3:鉴于您正在使用jQuery，我假设它将有用的引用返回到源按钮

    function test(e){
        alert();

        // Get a reference to the button
        // An explanation of this line is available here
        var target = (e.target)? e.target : e.srcElement;

        // Pass the button reference to jQuery to do jQuery magic
        var $btn = $(target);

    });

你需要使用.live来工作:

$(".test").live("click", function(){
   alert();
});

或者如果你使用jquery 1.7+使用.on:

$(".test").on("click", "p", function(){
   alert();
});

你可以点击添加动态创建的元素。下面的例子。使用“何时”来确保完成。在我的例子中，我用类扩展抓取了一个div，添加了一个“点击查看更多”的跨度，然后使用这个跨度隐藏/显示原始的div。

$.when($(".expand").before("<span class='clickActivate'>Click to see more</span>")).then(function(){
    $(".clickActivate").click(function(){
        $(this).next().toggle();
    })
});