[英]jQuery - on load of element with ajax
I searched for some time but could not find a working solution for my problem (sorry if I searched wrongly)... I would like to have the equivalent of the following function for an element loaded with ajax: 我搜索了一段时间,但找不到适合我的问题的解决方案(对不起,如果我搜索错误)...对于与ajax一起加载的元素,我希望具有以下功能:
$(document).ready(function() {
$('.div-modal-text').css("background-color","red");
});
Therefore I am using the following code: 因此,我正在使用以下代码:
$('#parent_id').on('action', '#id or class to be born', function to be performed() );
In my example the parent-child structure is: #projectModals (div whose content is dynamically loaded)>...>.div-project-description>.div-modal-text 在我的示例中,父子结构为:#projectModals(动态加载其内容的div)> ...>。div-project-description> .div-modal-text
This translates into the following code in my example: 在我的示例中,这转化为以下代码:
$('#projectModals').on('load', '.div-project-description', function() {
$(this).find('.div-modal-text').each(function() {
$(this).css("background-color","red");
});
});
I know 'load' does not work with .on(), but I tried different alternatives and I could not find anything working. 我知道'load'不适用于.on(),但是我尝试了其他替代方法,但找不到任何有效的方法。
Thanks for your help! 谢谢你的帮助!
EDIT : Here is my (simplified) HTML code: 编辑 :这是我的(简体)HTML代码:
<div id="projectModals"></div>
content loaded in #projectModals with Ajax: 使用Ajax在#projectModals中加载的内容:
<div class="row">
<div class="div-project-idcard">
column 1, don't bother too much about this column
</div>
<div class="div-project-description">
<div id="summary" class="div-modal-text">
Column2, text 1
</div>
<div id="purpose" class="div-modal-text"">
Column2, text 2
</div>
<div id="reforestation" class="div-modal-text">
Column2, text 3
</div>
<div id="certification" class="div-modal-text">
Column2, text 4
</div>
</div>
</div>
If you're waiting for it to be loaded via ajax, consider using $(window).ajaxSuccess()
instead: 如果正在等待通过ajax加载,请考虑使用
$(window).ajaxSuccess()
代替:
$(window).ajaxSuccess(function(){
$('#projectModals .div-project-description .div-modal-text').each(function() {
$(this).css("background-color","red");
});
});
for what I understand, you want to change some background color after an ajax has been executed. 据我了解,您想在执行ajax之后更改一些背景颜色。
I think it's best to make the operation in the ajax success 我认为最好使ajax的操作成功
$.ajax({
url: "some url",
data: {some data},
success: onAjaxSuccess,
});
and then; 接着;
function onAjaxSuccess(data){
//.. do things with data
var toExecute = $('#projectModals .div-project-description');
toExecute.find('.div-modal-text').each(function() {
$(this).css("background-color","red");
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.