jQuery函数停止开放后的工作和关闭模态窗口 [英] jQuery function stops working after opening and closing modal window
问题描述
我有这样的脚本，目前正在关闭和喜欢我的网页上：
＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
$（'。像'）。点击（函数（）{
$（本）。不是（这个）.removeClass（'点击'）;
$（本）.toggleClass（点击）;
}）;
}）;
＆LT; / SCRIPT＆GT;
但是，当我打开包含HTML（使用相同的脚本此页面上当前）一个模式窗口，然后将其关闭，该功能已经停止底层页面上工作。 喜欢按钮不再起作用。
信息的一个多一点，这是一个AngularJS应用程序使用（目前）很简单的模块。我敢肯定，这个问题可在角（任何解决方案，欢迎）来解决，但我想至少让jQuery的第一个工作日翻译它。
下面是模态窗口HTML：
＆LT; DIV CLASS =弹出窗口输入＆GT;
＆LT; DIV CLASS =料盒＆GT;
＆LT; DIV CLASS =照片提交＆GT;
＆LT; A HREF =＃ID =照片＆GT;＆LT; IMG SRC =图像/ PIC1-large.jpg＆GT;＆LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =意见＆GT;
＆LT; DIV CLASS =评论＆GT;
＆LT;一类=阿凡达＆GT;
＆LT; DIV CLASS =中心＆GT;
＆LT; IMG SRC =图像/ meg.jpg＆GT;
＆LT; / DIV＆GT;
＆所述; / A＆GT;
＆LT; DIV CLASS =内容后＆GT;
＆LT;一类=作者＆GT;梅格罗比肖＆LT; / A＆GT;
＆LT; DIV CLASS =元数据右拉式＆GT;
＆LT; DIV CLASS =日期＆GT;
＆LT; UL类=保证金零＆GT;
＆LT;李＆GT;＆LT; A HREF =＆GT;＆LT; IMG SRC =图像/ reply.pngALT =添加照片ID =回复＆GT;＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; DIV CLASS =象＆GT;＆LT; / DIV＆GT;＆LT; /李＆GT;
＆LT;李班=时间发布＆gt; 2500万＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =文本＆GT;
我认为今天上午单纯美好...＆LT; A HREF =＆GT; instagram.com/p/mV0PUrHRwQ/< / A＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-包装＆GT;
＆LT;输入类型=文本占位符=回复......级=回复MAXLENGTH =30＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT;！ - 切换功能Like按钮 - ＆GT;
＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
$（'。像'）。点击（函数（）{
$（本）。不是（这个）.removeClass（'点击'）;
$（本）.toggleClass（点击）;
}）;
}）;
＆LT; / SCRIPT＆GT;
如果我没有在这个单独的HTML文件中的脚本也不会加载当我打开模态（我知道一定有比对剧本加倍更好的解决方案）。
下面是加载模式窗口脚本：
＆LT;！ - MODAL图像弹出 - ＆GT;
＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
$（'＃照片'）。点击（函数（五）{
e.stopPropagation（）;
$获得（'image.html'功能（数据）{
modal.open（{内容：数据}）;
}）;
}）;
}）;
＆LT; / SCRIPT＆GT;
最后，这里是被引用的弹出窗口模式的脚本文件：
VAR模式=（函数（）{
VAR
方法= {}，
$叠加，
$模式，
$内容，
$关闭; //中心在视口中模式
method.center =功能（）{
VAR顶部，左; 顶= Math.max（$（窗口）.height（） - $ modal.outerHeight（），0）/ 2;
左= Math.max（$（窗口）.WIDTH（） - $ modal.outerWidth（），0）/ 2; $ modal.css（{
顶部：顶部+ $（窗口）.scrollTop（）
左：左+ $（窗口）.scrollLeft（）
}）;
}; //打开模态
method.open =功能（设置）{
。$ content.empty（）追加（settings.content）; $ modal.css（{
宽度：settings.width || '汽车'，
高度：settings.height || '汽车'
}）; method.center（）;
$（窗口）.bind（'resize.modal'，method.center）;
$ modal.show（）;
$ overlay.show（）;
}; //关闭模式
method.close =功能（）{
$ modal.hide（）;
$ overlay.hide（）;
$ content.empty（）;
$（窗口）.unbind（'resize.modal'）;
}; //生成的HTML并将其添加到该文件
$覆盖= $（'＆LT; DIV ID =叠加＆GT;＆LT; / DIV＆GT;'）;
$模式= $（'＆LT; DIV ID =模式＆GT;＆LT; / DIV＆GT;'）;
$内容= $（'＆LT; DIV ID =内容＆GT;＆LT; / DIV＆GT;'）;
接近$ = $（'＆LT;一个ID =关闭的href =＃＆GT;关闭＆LT; / A＆GT;'）; $ modal.hide（）;
$ overlay.hide（）;
$ modal.append（$内容，$关闭）; $（文件）。就绪（函数（）{
$（'身体'）追加（$叠加，$模态）;
}）; $ close.click（函数（五）{
亦即preventDefault（）;
method.close（）;
}）; 返回方法;
}（））; //调用
$（文件）。就绪（函数（）{ $（'＃消息'）。点击（函数（五）{
$获得（弹出窗口form.html'功能（数据）{
modal.open（{内容：数据}）;
}）;
}）; $（'＃测试）。点击（函数（五）{
$获得（弹出窗口form.html'功能（数据）{
modal.open（{内容：数据}）;
}）;
}）; $（'＃一个照片'）。点击（函数（五）{
modal.open（{内容：如何了？}）;
亦即preventDefault（）;
}）;
}）;
模态包含在当前页面（同一DOM）之内，你通过模式加载任何脚本将进行到底层页面。
如果您使用主页关于委托的情况下，应该在模态工作了。
的$（document）。在（'点击'，'。像'功能（E）{...}）;
这将意味着你可以跳过模式的脚本，并保存自己双重困境（可能的罪犯）。
但我也对你使用 $（本）。不是（这个）的有点糊涂。 这个是点击的元素，所以你基本上说的获得点击元素（jQueryfied），但不能点击的元素的。它读我错了，我想你的意思是要做到这一点，而不是：
$（'点击'）不是（这个）.removeClass（'点击'）;
这将删除名为任何类点击，从包含所述类的除了从点击的元素的所有元素。
I have this script which is currently working to turn off and on "likes" on my page:
<script>
$(document).ready(function() {
$('.like').click(function () {
$(this).not(this).removeClass('click');
$(this).toggleClass("click");
});
});
</script>
But when I open a modal window that contains html (with the same script on this page currently), and then close it, the function has stopped working on the underlying page. The "like" buttons no longer work.
One more bit of info, this is an AngularJS app with (currently) very simple modules. I'm sure the problem can be solved in Angular (any solutions are welcome), but I wanted to at least get the jQuery working first before translating it.
Here is the modal window HTML:
<div class="popup-input">
<div class="feed-box">
<div class="photo-submit">
<a href="#" id="photo"><img src="images/pic1-large.jpg"></a>
</div>
<div class="comments">
<div class="comment">
<a class="avatar">
<div class="center">
<img src="images/meg.jpg">
</div>
</a>
<div class="post-content">
<a class="author">Meg Robichaud</a>
<div class="metadata pull-right">
<div class="date">
<ul class="margin-zero">
<li><a href=""><img src="images/reply.png" alt="Add Photo" id="reply"></a></li>
<li><div class="like"></div></li>
<li class="time-posted">25m</li>
</ul>
</div>
</div>
<div class="text">
My view this morning is simply beautiful... <a href="">instagram.com/p/mV0PUrHRwQ/</a>
</div>
</div>
</div>
<div class="col-wrapper">
<input type="text" placeholder="Reply..." class="reply" maxlength="30">
</div>
</div>
</div>
</div>
<!-- TOGGLE FUNCTION LIKE BUTTON -->
<script>
$(document).ready(function() {
$('.like').click(function () {
$(this).not(this).removeClass('click');
$(this).toggleClass("click");
});
});
</script>
If I don't have the script in this separate html file it won't load when I open the modal (I know there must be a better solution than doubling up on the script).
Here is the script that loads the modal window:
<!-- MODAL IMAGE POPUP -->
<script>
$(document).ready(function() {
$('#photo').click(function(e) {
e.stopPropagation();
$.get('image.html', function(data){
modal.open({content: data});
});
});
});
</script>
And lastly, here is the pop-up window modal script file being referenced:
var modal = (function(){
var
method = {},
$overlay,
$modal,
$content,
$close;
// Center the modal in the viewport
method.center = function () {
var top, left;
top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
$modal.css({
top:top + $(window).scrollTop(),
left:left + $(window).scrollLeft()
});
};
// Open the modal
method.open = function (settings) {
$content.empty().append(settings.content);
$modal.css({
width: settings.width || 'auto',
height: settings.height || 'auto'
});
method.center();
$(window).bind('resize.modal', method.center);
$modal.show();
$overlay.show();
};
// Close the modal
method.close = function () {
$modal.hide();
$overlay.hide();
$content.empty();
$(window).unbind('resize.modal');
};
// Generate the HTML and add it to the document
$overlay = $('<div id="overlay"></div>');
$modal = $('<div id="modal"></div>');
$content = $('<div id="content"></div>');
$close = $('<a id="close" href="#">close</a>');
$modal.hide();
$overlay.hide();
$modal.append($content, $close);
$(document).ready(function(){
$('body').append($overlay, $modal);
});
$close.click(function(e){
e.preventDefault();
method.close();
});
return method;
}());
// Calls
$(document).ready(function() {
$('#message').click(function(e) {
$.get('popup-form.html', function(data){
modal.open({content: data});
});
});
$('#test').click(function(e) {
$.get('popup-form.html', function(data){
modal.open({content: data});
});
});
$('a#photo').click(function(e){
modal.open({content: "Hows it going?"});
e.preventDefault();
});
});
The modal is contained within the current page (same DOM), and any script you load through the modal will carry to the underlying page.
If you use a delegated event on the "main page", it should work in the modal too.
$(document).on('click', '.like', function(e) { ... });
This would mean that you can skip the script in the modal, and save yourself a double bind (the probable offender).
But I'm also a bit confused over your use of $(this).not(this). this is the clicked element, so you're essentially saying get clicked element (jQueryfied), but not the clicked element. It reads wrong to me, and I think you mean to do this instead:
$('.click').not(this).removeClass('click');
This will remove any class named click, from all elements containing said class except from the clicked element.
这篇关于jQuery函数停止开放后的工作和关闭模态窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
