title: Dynamically loaded Jquery dialog causes site to redirect user to login after upgrading to latest version of Jquery
body: <p>We have a MVC application we recently upgraded jquery to version 3.6.  Since we did that, all of our dynamically loaded dialog modals, no longer function correctly.</p>
  <p>What we have as a dyanmically built table, each row has a link.  Click on that link is supposed to open a jquery dialog which displays details about the row they clicked.</p>
  <p>When a user clicks on a link that should load and open the dialog, instead the dialog starts to open and populate with data and then &quot;suddenly&quot; the user is redirected to the root URL of the site instead of staying on the page with the dialog open.</p>
  <p>It's behaving as if something is hijacking the request pipeline or aborting the running java-script on the page.</p>
  <p>Here are the elements in the html where link (in a dynamically built table) is created:</p>
  <pre><code>&lt;tr class=&quot;t_row&quot; id=&quot;@item.ID&quot;&gt;
      &lt;td class=&quot;t_col&quot; data-label=&quot;Date&quot; scope=&quot;row&quot;&gt;
          &lt;a href=&quot;#@item.ID&quot;&gt;@item.CreateDate.ToShortDateString()&lt;/a&gt;
      &lt;/td&gt;
  </code></pre>
  <p>Here is the html for the jquery dialog modal:</p>
  <pre><code>&lt;div class=&quot;modal fade&quot; tabindex=&quot;-1&quot; id=&quot;RefundDlg&quot; role=&quot;dialog&quot; aria-labelledby=&quot;basicModal&quot; aria-hidden=&quot;true&quot;&gt;
      &lt;div class=&quot;modal-dialog&quot;&gt;
          &lt;div class=&quot;modal-content&quot; id=&quot;RefundDlgHeader&quot;&gt;
              &lt;div class=&quot;modal-body&quot; id=&quot;RefundBody&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-footer&quot;&gt;
                  &lt;button id=&quot;closeRefundDlg&quot; class=&quot;button standard-primary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here is the script that loads the content into the body:</p>
  <pre><code>        $(&quot;#refunds tr[id]&quot;).each(function (index) {
              var id = this.id;
  
              $(this).children(&quot;td&quot;).children(&quot;a&quot;).click(function () {
                  $(&quot;#refundMethod&quot;).val(id);
                  var url = '@Url.Action(&quot;DetailsRefund&quot;, new { id = &quot;-1&quot; })';
                  url = url.replace(&quot;-1&quot;, id);
  
                  $(&quot;#RefundBody&quot;).load(url, null, function () {
                      $(&quot;#RefundDlgHeader&quot;).focus();
                      $(&quot;#RefundDlg&quot;).modal('show');
                  });
              });
          });
  </code></pre>
  <p>I should note that the load command in the code above does return the correct data for the dialog and if I take that link and put it in a separate window, it does return the correct data on the page, just not in the modal, obviously.</p>
  <p>basically our issue happens on this line:</p>
  <p>$(&quot;#RefundBody&quot;).load(url, null, function ()</p>
  <p>Running DEV tools in Chrome, you can see the requested data is returned, for a brief moment when running this I see the dialog with data, then I am suddenly redirected to index.</p>
  <p><a href="https://i.stack.imgur.com/SSw9C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SSw9C.png" alt="ChromeDevTools" /></a></p>
  <p>All this code above worked until we upgraded to the latest jquery.  Any assistance or guidance someone can provide is much appreciated!</p>