jquery click 对 ajax 生成的内容不起作用 [英] jquery click doesn't work on ajax generated content

问题描述

我正在使用 $(".button").on("click", function(){ });

单击容器上的按钮，然后完成 ajax 调用，内容更新了新东西，然后当我尝试单击 .button 时，它不起作用......当我单击按钮时，不会返回任何内容.

我什至尝试过

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

或

$(".button").click(function(){ });

我怎样才能让它发挥作用?

我的 html:

<ul><li>item1</li><li>item2</li><li>item3</li><input type="button" value="reload" class="button"/>

解决方案

应该这样做.

$('body').on('click', '.button', function (){警报('点击！');});

如果你有一个容器在 ajax 请求期间不会改变，这会更高效:

$('.container').on('click', '.button', function (){警报('点击！');});

始终将委托事件绑定到将包含动态元素的最近的静态元素.

I am using $(".button").on("click", function(){ });

to click to a button which is on a container but then an ajax call is done and the content gets updated with new stuff and then when i try to click .button it wont work... nothing will get returned when i click the button.

I even tried

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

or

$(".button").click(function(){ });

How can I make it work?

EDIT : my html:

<div class="container">
   <ul>
       <li>item1</li>
       <li>item2</li>
       <li>item3</li>
   </ul>
   <input type="button" value="reload" class="button" />
</div>

解决方案

Should be done this way.

$('body').on('click', '.button', function (){
        alert('click!');
    });

If you have a container that doesn't change during the ajax request, this is more performant:

$('.container').on('click', '.button', function (){
        alert('click!');
    });

Always bind the delegate event to the closest static element that will contain the dynamic elements.

这篇关于jquery click 对 ajax 生成的内容不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！