Can't access elements loaded via ajax using jQuery
I need to change the content loaded via ajax but can't get it. I don't have access to the js file that does the bootstrap, so I need to write a separate function to change the content.
Content needs to be modified automatically WITHOUT user clicking or interacting with anything on the page.
In the example below, the 'news' div is hardcoded and the 'articles' div is loaded via ajax.
Html
<div id="news">
<div class="article"><img src="headline1_small.jpg">
<div class="article"><img src="headline2_small.jpg">
<div class="article"><img src="headline3_small.jpg">
</div>
JQuery
$(document).ready(function() {
console.log( $("#news").html() );
});
Console
<div id="news">
</div>
How can I access articles? I want to remove "_small" from img src.
Thank!
source to share
How can I access articles? I want to remove "_small" from img src.
For example, for example:
$('#news .article img').attr('src', function() {
return this.src.replace('_small', '');
});
You can execute this code on successful AJAX completion
$(document).ajaxSuccess(function() {
// above code
});
source to share
You said the article is div
loaded via AJAX, this script seems to run before they are loaded. Try to put this script after #news
so that all content is already loaded when you execute it.
<div id="news">
<div class="article"><img src="headline1_small.jpg">
<div class="article"><img src="headline2_small.jpg">
<div class="article"><img src="headline3_small.jpg">
</div>
<script>
$(document).ready(function() {
console.log( $("#news").html() );
});
</script>
source to share
To remove "_small" from the src img tag, there is another way for that. you don't need to access the html () -> innerHTML from the #news div.
all you could do is get all the ".article" divs and then change the img tag.
$(".article img").each(function() {
$(this).attr('src', $(this).attr('src').replace("_small", ""));
});
thank
source to share