jquery click 不适用于 ajax 生成的内容答案

【问题标题】：jquery click doesn't work on ajax generated contentjquery click 不适用于 ajax 生成的内容
【发布时间】：2012-02-18 21:37:06
【问题描述】：

我正在使用$(".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>

【问题讨论】：

请显示 ajax 调用返回的内容。
以及附加监听器的 jQuery 的其余部分。您所描述的正是 live 应该处理的内容，所以奇怪的是这不起作用。
我有一个 ul，我在其中单击它们，然后使用 .on("click") 在 javascript 中简单地回显“test”，但是当我单击按钮时，它会进行 ajax 调用并重新加载 ul，但是然后当我点击按钮时它会停止做任何事情。它不会返回任何东西。

标签： jquery ajax click live

【解决方案1】：

应该这样做。

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

如果您有一个在 ajax 请求期间不会更改的容器，则性能更高：

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

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

【讨论】：

感谢您的回答！还是觉得这很奇怪，用这种方式感觉不好。希望 jquery 有更好的方法来处理这些情况
@MiguelStevens，阅读on's docs 一旦你阅读并理解了这个概念，它就不会很奇怪并且非常有意义。
但是我将如何为此编写父... $("input#someId").autocomplete({//some code});...这里没有 on 事件..
@Sadaquat，我建议在另一个线程中写一个完整的问题，其中包含所有必需的详细信息。如果您没有得到答复，您可以通过评论联系我，我会尽力提供帮助。
终于找到了我想要的解决方案！谢谢楼主

【解决方案2】：

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

而不是

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

我用过

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

【讨论】：

请注意，selector argument is not required，但在这种情况下是必需的。
感谢您的解决方案，+1
为什么选择器参数不是必需的，但在这种情况下是必需的？
我认为这是因为在这种情况下选择器会重新运行，但如果不包括在内，它不会被捕获在选择器抓取的最初运行的项目列表中。
@stergosz 谢谢，这真的解决了我的紧张情绪。

【解决方案3】：

代替：

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

我用过：

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

我用过这个，效果很好。

【讨论】：

【解决方案4】：

这是你想要做的吗？请注意，我将$.on() 放在父级上，但选择.button 进行操作。

.on( 事件 [, 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());
    });
});

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

另一个演示：

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/

【讨论】：