How do I reinitialize my jQuery calls after calling .html() to replace content

Stack Overflow Asked by Dan Tappin on December 18, 2020

I have a page with various jQuery calls on initial load (select2, ‘onclick’ etc.). It’s a remote JS form in my Rails app. If the submit fails I have the page reload the form again for the user to correct validations etc.

The issue is all the intial jQuery calls do not persist on the reloaded content (via a .html() call).

I have found a few posts like this:

Reinitialize jQuery after AJAX call

I have fixed most of the original calls like this which now works fine:

$(document).on('keyup', 'input.item_quantity', function(event){
    my code etc...

I have others like this which I can’t seem to resolve:

$(function() {
    ajax: {
      url: 'myurl',
      dataType: 'json'

These are all the calls on the document loading and not due to user interaction. I can make these load when the user clicks on the inputs but there is a slight delay between the user click and the select2 kicking in. I need this to persist even when I reload content via the .html().

Calling this direct after reload in the console works:


I added this to the code where my .html() is called but the select2 does not initialize and no console errors.

How have these select2 call bind to the initial elements and ones added afterwards? I suspect I may be missing something small or obvious here.

EDIT: The URL in the select2 AJAX config is also dynamic based on other form input values.

One Answer

You're going to simply have to re-initialize the select2 elements. Your second call after the .html() is not working because the .select2() call is expecting your configuration passed to it like you did when you first initialized. It has no prior knowledge of your configuration, especially if you are replacing the entire .html(). I would recommend saving your configuration to a variable that can be re-used.

const select2Config = {
  ajax: {
    url: 'myurl',
    dataType: 'json'

$(function() {

Then you can call it again after your .html() call. You may have to destroy the select2 control before re-initializing, which will unbind all of the events to it. If you have a dynamic URL, you can simply override that part of the config to minimize code duplication:

/* ... .html() call here ... */

// get new dynamic URL
const myNewAjaxUrl = /* code to get dynamic url */

// destroy previous select2 instance (may be unnecessary)
// then re-initialize w/overridden config 
  .select2(Object.assign({}, select2Config, {
    ajax: {
      url: myNewAjaxUrl,

You can look at this answer to see why I call ...select2Config.ajax, to maintain any other AJAX options you have and to only override the url parameter. You could also just do this separately if you thought it looked cleaner:

const newConfig = Object.assign({}, select2Config);
newConfig.ajax.url = /* code to get dynamic url */


Correct answer by Jason Roman on December 18, 2020

Add your own answers!

Related Questions

std::map::operator[] is more efficient than std::map::insert?

1  Asked on December 27, 2020 by eddieipeace


Splitting a list (?)

1  Asked on December 27, 2020 by superannuated


Python Scrapy how to save data in different files

1  Asked on December 27, 2020 by silver-flash


JS get random value from array and update array

2  Asked on December 27, 2020 by nicolas-schmit


Caught and declared exception in Java?

1  Asked on December 26, 2020 by hrvoje-t


IEnumerable and Recursion using yield return

8  Asked on December 26, 2020 by jamie-dixon


How to parse CSV with node.js?

2  Asked on December 26, 2020 by idarosa


Why this program with for loop give zero when y>5 and x=2

2  Asked on December 26, 2020 by vms


Null pointer exception. How my connection object is pointing to null

2  Asked on December 26, 2020 by monisha-ravi


How do I make contents in HTML by using css

0  Asked on December 26, 2020 by jaeseo-lee


How to show Toaster after logout

2  Asked on December 26, 2020


How to write to a csv within a pandas UDF in pyspark?

0  Asked on December 26, 2020 by codemaster2020


Ask a Question

Get help from others!

© 2022 All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP