jQuery的点击事件在使用Ajax生成的内容上不起作用。

Question

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

来点击一个容器中的按钮，但当进行ajax调用并更新内容后，再次尝试点击 .button 按钮时它不起作用了... 点击按钮时没有任何返回内容。

我甚至尝试过

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

或者

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

我该怎么让它工作？ 编辑： 我的 HTML 代码：

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

- stergosz

---

请展示ajax调用返回了什么。 - ron tornambe

而其余的jQuery则是附加监听器。您所描述的正是live应该处理的内容，所以奇怪的是它没有起作用。 - Brandan

我有一个ul，当我在它们上面点击时，在javascript中使用.on("click")简单地回显"test"。但是当我点击按钮时，它会进行一个ajax调用并重新加载ul，但是之后当我再次点击该按钮时，它就不起作用了，不会返回任何东西。 - stergosz

Answer 1

应该这样做。

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

如果您有一个在ajax请求期间不会改变的容器，那么这样会更高效：

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

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

- gdoron is supporting Monica

---

谢谢回答！我还是觉得这种方式非常奇怪，不太适合使用。希望 jQuery 有更好的处理这些情况的方法。 - Miguel Stevens

@MiguelStevens，阅读官方文档一旦你理解了这个概念，它就不会感到奇怪，而且会完全合乎逻辑。 - gdoron

但是我该怎么为这个写一个父级呢...$("input#someId").autocomplete({//一些代码});...这里没有on事件.. - Dragon

@Sadaquat，我建议您在另一个帖子中写下所有必要的细节，提出一个完整的问题。如果您没有得到答案，可以通过评论联系我，我会尽力帮助您。 - gdoron

我也做了同样的事情，但它没有起作用。有什么建议吗？ - Zaki Mustafa

终于我找到了我一直在寻找的解决方案！谢谢您。 - K. P.

Answer 2

我正确使用.on()函数解决了我的问题，因为我缺少一个参数。

而不是

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

我使用过

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

- stergosz

---

只是一个提示，选择器参数不是必需的，但在这种情况下是必要的。 - Jared Farrish

为什么选择器参数在这种情况下不是必需的，但却是必要的？ - ryentzer

我认为这是因为在这种情况下选择器被重新运行了，但如果不包含它，则不会被捕获在最初运行的使用选择器抓取的项目列表中。 - Bing

@stergosz 谢谢你，真的解决了我的紧张情绪。 - Khadka Pushpendra

Answer 3

替代方式：

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

我使用了：

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

我使用过这个，它起作用了。

- Macc

Answer 4

这是你想做的吗？注意，我将 $.on() 放在父元素上，但选择了 .button 作为动作对象。

.on( events[, selector] [, data], handler(eventObject) )

selector：选择器字符串，用于过滤触发事件的所选元素的后代。如果选择器为空或省略，则事件总是在达到所选元素时触发。

http://api.jquery.com/on/

<div id="stuff">
    <button class="button">Click me!</button>
    <p>Stuff</p>
</div>

var $stuff = $('#stuff'),
    ajaxContent = $stuff.html();

$stuff.on('click', '.button', function(){
    $.get('/echo/html/', function(){
        $stuff.empty();
        console.log($stuff.html());
        alert($stuff.html()); // Look behind, #stuff is empty.
        $stuff.html(ajaxContent);
        console.log($stuff.html());
    });
});

这里是另一个演示

下面是需要翻译的内容：

var $stuff = $('#stuff'),
    ajaxContent = $stuff.html(),
    $ajaxContent,
    colors = ['blue','green','red'],
    color = 0;

$stuff.on('click', '.button', function(){
    $.get('/echo/html/', function(){
        color++;
        if (color == colors.length) color = 0;
        console.log($stuff.html());
        alert($stuff.html());
        $ajaxContent = $(ajaxContent);
        $stuff.append($ajaxContent).css('color', colors[color]);
        console.log($stuff.html());
    });
});

http://jsfiddle.net/62uSU/2/

- Jared Farrish