Rerun Jquery function onclick

Question

I have a simple jquery script that changes the url path of the images. The only problem is the doesn't apply after I click the load more button. So I'm trying to do a workaround where it calls the script again after clicking the button.

<script type='text/javascript'>
$(document).ready(function ReplaceImage() {
    $(".galleryItem img").each(function() {
        $(this).attr("src", function(a, b) {
            return b.replace("s72-c", "s300")
        })
    })
});
</script>

HTML

<a href="javascript:;" onclick="ReplaceImage();">Load More</a>

Your ReplaceImages is anonymous named function inside your .ready().. move it outside the .ready, and then do $(document).ready(ReplaceImage) — Keith
– Keith, Commented Oct 7, 2016 at 0:07

sic1 · Accepted Answer · 2016-10-07 00:37:29Z

1

While Keith's answer will get you what you are looking for, I really can't recommend that approach. You are much better off with something like this.

<script type="text/javascript">
$(function() {

    var replaceImage = function() {
        $('.galleryItem img').each(function() {
            $(this).attr('src', function(index, value) {
                return value.replace('s72-c', 's300');
            });
        });
    };
    replaceImage();

    $('.js-replace-image').on('click', replaceImage);

});
</script>

Using this html

<button class="js-replace-image">Load More</button>

By taking this approach, you do not expose any global variables onto the window object, which can be a point of issue if you work with other libraries (or developers) that don't manage their globals well.

Also, by moving to a class name and binding an event handler to the DOM node via JavaScript, you future proof yourself much more. Also allows yourself to easily add this functionality to more buttons very easily but just adding a class to it.

I updated the anchor tag to a button because of the semantics of what you need to do - it doesn't link out anywhere, it's just dynamic functionality on the page. This is what buttons are best served for.

I'd also recommend putting this in the footer of your site, because then, depending on your situation, you will already have the images updated properly without having to click the button. The only need for the button would be if you are dynamically inserting more images on the page after load, or if this script was in the head of your document (meaning jQuery couldn't know about the images yet).

I hope this helps, reach out if you have questions.

answered Oct 7, 2016 at 0:37

sic1

4863 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dave Cripps Over a year ago

If your JavaScript is being included via an external file you can use the defer attribute in the script tag to ensure the script is not run until the DOM is fully loaded. Although you are using jQuery's ready() which is pretty solid about not executing until everything is loaded so you might be okay.

Collectives™ on Stack Overflow

Rerun Jquery function onclick

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related