[英]jQuery calling div element that has been loaded by ajax, or inserted via html() method
It's my first post on stackoverflow. 这是我关于stackoverflow的第一篇文章。 I've searched similiar questions here and found a couple of answers but couldn't really find a solution to this particular problem that would help me.
我在这里搜索了类似的问题,并找到了一些答案,但是找不到真正可以帮助我的特定问题的解决方案。
I have a webpage which loads main contents by ajax. 我有一个通过ajax加载主要内容的网页。 Simply like this:
就像这样:
function loadContent(content) {
if(localStorage.content != content) {
$("#content #content_loading").css("display", "block");
}
var userID = Cookies.get("UserID");
$.ajax({
url: '../game/data/load_content.php',
type: 'post',
data : { ID : userID, Content : content },
success: function(response) {
$("#content #content_loading").css("display", "none");
$("#content #import").html(response);
localStorage.content = content;
$("#header").html("<div class='header_text'>"+content+"</div>");
}
}); }
It loads other ajax functions, html and css. 它加载其他ajax函数,html和css。 Since I have thousands and thousands lines of code simple things get trickier.
因为我有成千上万的代码行,所以简单的事情变得棘手。 Now I simply want to create an universal 'close' button for popup windows.
现在,我只想为弹出窗口创建一个通用的“关闭”按钮。 All of the popup windows are in a box, and the close button is inside the box header.
所有弹出窗口都在一个框内,而关闭按钮在框头内。 Now I want to close all popup windows with a single function:
现在,我想用一个函数关闭所有弹出窗口:
$('.close').click(function() {
$(this).parent().parent().fadeOut();
});
This simply selects the parent of the close element, which is header and then parent of that parent which is the whole box. 这只是选择close元素的父元素(即标头),然后选择该父元素的父元素(即整个框)。 One of the popup functions looks like this:
弹出功能之一如下所示:
function showPopup(header, content) {
$("#popup_header").html(header+"<div class='close'></div>");
$("#popup_content").html(content);
$("#popup").fadeIn(300);
}
This function is included in the main document ( <script src="script"></script>
). 此功能包含在主文档中(
<script src="script"></script>
)。
Then the other popup is directly loaded upon loadContent(content) function, so it's loaded with ajax call. 然后将另一个弹出窗口直接加载到loadContent(content)函数上,以便通过ajax调用加载。 And it's simply HTML that looks like this:
它就是这样的HTML:
<div id="nearby_players">
<div class="header">PLAYERS NEARBY <div class="close"></div></div>
<ul> </ul>
</div>
Now if I insert the 'close' function upon click in the document that ajax is loading it will work. 现在,如果我在加载ajax的文档中单击时插入“关闭”功能,它将可以使用。 And if I change the loadPopup() function to this:
如果我将loadPopup()函数更改为此:
function showPopup(header, content) {
$("#popup_header").html(header+"<div class='close'></div>");
$("#popup_content").html(content);
$("#popup").fadeIn(300);
$(".close").click(function() {
$(this).parent().parent().fadeOut();
});
}
It works too. 它也可以。 But what I want to do is to create a single click function attached to the main document that will close all the possible popups that are being loaded on the webpage or already are on the webpage.
但是我要做的是在主文档上创建一个单击功能,该功能将关闭正在网页上加载或已经在网页上的所有可能的弹出窗口。 I thought it was a problem since 'close' element was an ID not a class.
我认为这是一个问题,因为“关闭”元素是一个ID,而不是一个类。 And since it should be unique I've changed it to class.
由于它应该是唯一的,因此我将其更改为类。 So my question is.
所以我的问题是。 How do I refer to all of the elements with class 'close' whether they are being loaded with ajax, and then within that ajax they get loaded again with another ajax and so on.
我如何用class'close'引用所有元素,而不管它们是否正在用ajax加载,然后在该ajax中将它们再次加载另一个ajax,依此类推。 And also the popups that are already inserted into document when the webpage gets loaded?
还有加载网页时已经插入到文档中的弹出窗口?
How do I add these elements to the DOM so jQuery actually finds it? 我如何将这些元素添加到DOM中,以便jQuery实际上找到它?
Regards, Hazes! 问候,阴霾!
You create elements dynamically, which means that events are not attached to them. 您动态创建元素,这意味着事件未附加到它们。 Please read how to attach events to dynamically created elements: http://api.jquery.com/live/
请阅读如何将事件附加到动态创建的元素: http : //api.jquery.com/live/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.