jQuery在加载的内容中不起作用 [英] Jquery not working in the loaded content
问题描述
似乎有一个简单的解决方案，但我还不能弄清楚，有上千个类似的主题，但没有一个对我有用，所以我以一种非常简单的方式提出这个问题，
It seems to have an easy solution but I couldn't figure it out yet, there are a thousand similar topics but none worked for me, So I'am asking this question in a very simple way,
我有一个按钮，比方说按钮"A"，我想在单击此按钮时加载外部页面的一部分，
I have a button, lets say button "A", I want to load a section of an external page when this button is being clicked,
在加载该部分之后，还有另一个按钮("B")(在加载的内容内部)使用jQuery显示了一些隐藏的内容，问题是第二个按钮不起作用. 我尝试使用.load('content.html#1，script');设置超时& ...
after that section is loaded, there is another button("B") (inside the loaded content) that shows some hidden content using jQuery, the problem is this second button is not working. i tried setting timeout, using .load('content.html #1, script'); &...
以下是代码: 主页:
<body>
<a href="#" id="load">Load</a>
<div id="holder"></div>
</body>
内容页面:
<body>
<section id="1">
Content 111
<a href="#" id="show">Show...</a>
<div id="showhere"></div>
</section>
<section id="2">
Content 222
</section>
</body>
脚本
$(document).ready(function() {
$("#load").click(function() {
$('#holder')
.html('<div> Loading</div>')
.load('content.html #1');
});
$("#show").click(function() {
$('#showhere')
.html('<p>here it is</p>')
});
});
谢谢大家的完美回答， 对于这种情况，我认为最短和最简单的方法是使用.live 但是事情是，这只是使事情变得不那么简单的一个示例，在实际项目中，我要在加载的内容中执行一个复杂的jquery，这不只是添加.html元素，所以基本上，我要使Java脚本在加载的内容上起作用的解决方案，也许是在加载内容后进行某种重置或重新加载?
Thanks all for your perfect answers, for this case I think the shortest and simplest would be using .live but the thing is This is just a sample to make things less complicated, in the real project I have a complicated jquery to be executed in the loaded content, it's not just about adding a .html element, So basically,I'm asking for a solution to make java script work on the loaded content, maybe some sort of reset or reload after content is loaded?
嗯，我还没有找到解决方案，所以我决定更改代码，将.live添加到所有函数中，但是还有另一个问题，我知道对于事件我必须使用一些东西像
Well, I haven't found a solution to this yet, so I decided to change my code, I'm adding .live to all functions, but there is another problem, I understand that for events I have to use something like
$("#show").live("click",function() {
代替
$("#show").click(function() {
但是函数中没有很多其他东西，例如:
but there are lots of more stuff which are not in a function, like:
var $itval = $("#holder li").length;
$(".filters li input[value*='all']").parent().find('span').html($itval);
$("#holder li, .played").show();
$(".entry-made").hide();
有没有办法包装一个不会影响整个jquery东西的函数?
is there any way to wrap a function which doesn't affect anything around the whole jquery stuff?
推荐答案
使用 .on()的委托版本将事件处理程序扩展"到动态加载的内容
Use the delegate version of .on() to "extend" the event handler to the dynamically loaded content
$("#holder").on("click", "#show", function() {
$('#showhere').html('<p>here it is</p>')
});
});
这篇关于jQuery在加载的内容中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
