<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {

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

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

    </script>
</head>
<body>
    <h2></h2>
    <button>generate new element</button>
</body>
</html>

我试图通过单击按钮在<h2>中生成一个类名为test的新标记。我还定义了一个与test关联的单击事件。但是这个事件不起作用。

有人能帮忙吗?


当前回答

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

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

其他回答

我在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/

Jquery .on的工作可以,但我有一些问题的渲染实现上面的一些解决方案。我使用.on的问题是,它在某种程度上呈现的事件不同于.hover方法。

只是供其他可能也有这个问题的人参考。我通过为动态添加的项目重新注册悬浮事件来解决我的问题:

重新注册悬停事件,因为悬停对动态创建的项目不起作用。 所以每次我创建新的/动态项目时,我都会再次添加悬停代码。完美的作品

$('#someID div:last').hover(
    function() {
       //...
    },
    function() {
       //...
    }
);

原因:

在jQuery中,Click()事件直接绑定,仅当特定元素(Html代码)存在于页面(页面加载后)时,将事件处理程序附加到元素上。

动态元素是在javascript或jquery的帮助下创建的(不是在Html中)。

它不会考虑页面加载后创建的未来元素(Dynamic)。

因此,正常的单击事件不会在动态元素上触发。

解决方案:

为了克服这个问题,我们应该使用on()函数。On()可以为当前元素和未来元素委托事件。

委托事件的优点是可以将处理程序附加到将来要添加到文档中的元素。

注意:delegate(),live()和on()函数比DOM元素更有优势。从JQuery 1.7开始,delegate()和live()已弃用(不要使用它们)。

可以同时为当前和未来的元素委托事件。

你的代码应该是这样的

从$(document).ready中删除代码:

$(".test").click(function(){

  alert();

});

改变为:

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

  alert('Clicked');

});

您正在使用的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。

你需要使用.live来工作:

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

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

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