jquery click 对 ajax 生成的内容不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9344306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery click doesn't work on ajax generated content
提问by stergosz
I am using $(".button").on("click", function(){ });
我在用 $(".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 .buttonit wont work... nothing will get returned when i click the button.
单击容器上的按钮，然后完成 ajax 调用，内容更新为新内容，然后当我尝试单击.button它时将不起作用...单击该按钮时不会返回任何内容。
I even tried
我什至试过
$(".button").live("click", function(){ });
or
或者
$(".button").click(function(){ });
How can I make it work?
我怎样才能让它工作？
EDIT :my html:
编辑：我的 html：
<div class="container">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<input type="button" value="reload" class="button" />
</div>
回答by gdoron is supporting Monica
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:
如果您有一个在 ajax 请求期间不会更改的容器，则性能更高：
$('.container').on('click', '.button', function (){
alert('click!');
});
Always bind the delegate event to the closest static element that will contain the dynamic elements.
始终将委托事件绑定到最近的包含动态元素的静态元素。
回答by stergosz
Ok i solved my problem by using the .on() function correctly since i was missing one parameter.
好的，我通过正确使用 .on() 函数解决了我的问题，因为我缺少一个参数。
instead of
代替
$(".button").on("click", function() { } );
i used
我用了
$(".container").on("click", ".button", function() { } );
回答by Macc
Instead of:
代替：
$(".button").on("click", function() { } );
I used:
我用了：
$(".container").on("click", ".button", function() { } );
I have used this and it worked.
我已经使用了这个并且它起作用了。
回答by Jared Farrish
Is this what you're trying to do? Note, I'm putting the $.on()on the parent, but selecting the .buttonfor the action.
这是你想要做的吗？请注意，我将$.on()放在父级上，但.button为操作选择了。
.on( events [, selector][, data], handler(eventObject) )
selectorA selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
.on( events [, selector][, data], handler(eventObject) )
selector一个选择器字符串，用于过滤触发事件的选定元素的后代。如果选择器为 null 或省略，则始终在到达所选元素时触发事件。
<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());
});
});
Another demonstration:
另一个演示：
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());
});
});
