无法使用jQuery访问通过ajax加载的元素

Question

I need to modify content loaded via ajax, but can't seem to access it. I don't have access to the js file that is doing the initial load so I need to write a separate function to change the content.

The content needs to be modified automatically WITHOUT the user clicking or interacting with anything on the page.

In the example below the 'news' div is hard coded and the 'article' divs are 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 the articles? I want to remove '_small' from the img src.

Thanks!

Answer 1

This should work:

$(document).ajaxStop(function() {
    $("#news").find('img').attr("src", function(_, src){
        return src.replace('_small', '');
    });
});

Answer 2

How can I access the articles? I want to remove '_small' from the img src.

For example like this:

$('#news .article img').attr('src', function() {
    return this.src.replace('_small', '');
});

You can execute this code on AJAX successful completion

$(document).ajaxSuccess(function() {
    // above code
});

Answer 3

You said the article div s are loaded through AJAX, seems that this script is running before they are loaded. Try putting this script after #news so all the content is already loaded when it is executed.

<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>

Answer 4

To remove "_small" from src of the img tag, there is another way for that. you dont need to get access to the html() -> innerHTML of the #news div.

all you could do is get hold of the all the ".article" div's and then alter the img tag.

$(".article img").each(function() {
   $(this).attr('src', $(this).attr('src').replace("_small", ""));
});

Thanks