草庐IT

javascript - 强制重新触发 ajaxed 内容上的所有(脚本/函数)

coder 2023-07-05 原文

tl;博士
我使用 ajax 来获取新内容。内容被提取并添加到页面。但是，脚本不会“重新触发”，因为它们的调用超出了 ajaxed div .
脚本加载和触发在初始页面加载时没有任何问题，但在我通过 ajax 添加新内容时则不然。我没有收到控制台错误，如果我直接访问 URL 也没有问题。

相关:

  • Forcing Script To Run In AJAX Loaded Page - 与一个特定的脚本有关。我想修复(重新启动)所有脚本，包括来自 Cloudflare apps 的动态脚本
  • Using jQuery script with Ajax in Wordpress - 同上，这仅与一个特定脚本有关
  • ajax loaded content, script is not executing

    • 简介:
    我用 Ajaxify WordPress Site(AWS)在 WordPress 网站上。
    该插件可让您选择 div通过它的 id 然后获取新内容 div使用 ajax
    html标记
    <html>

<head></head> 

<body>
  <div id="page"> 
    <header></header>
    <main id="ajax"> <!-- This is what I want to ajaxify -->
      <div class="container">
        main page content
      </div> 
    </main> <!-- end of ajaxfied content  -->
    <footer></footer>
  </div> <!-- #page -->
</body>

</html>

    问题
    该插件有效，我加载了新内容并设置了样式，但存在问题。我的部分页面脚本和函数调用 在我使用 ajax 的 div 之外。我有两个例子
    1- 在 <footer> 中加载并调用了 Masonry
    <html>

<head></head> 

<body>
  <div id="page"> 
    <header></header>
    <main id="ajax"> <!-- This is what I want to ajaxify -->
      <div class="container">
        main page content
      </div>  
    </main>   <!-- end of ajaxfied content  -->
    <footer></footer> <!-- Masonry script is loaded and called here -->
  </div> <!-- #page -->
</body>

</html>
    2- 谷歌地图调用位于 <head>
    <html>

<head></head>  <!-- Google maps is called here -->

<body>
  <div id="page"> 
    <header></header>
    <main id="ajax"> <!-- This is what I want to ajaxify -->
      <div class="container">
        main page content
      </div>  
    </main>  <!-- end of ajaxfied content  -->
    <footer></footer> 
  </div> <!-- #page -->
</body>

</html>

    这些只是两个 示例 .在其他地方还有其他人。如您所知，此类脚本不会被重新调用，因为页面上唯一重新加载的是 <main id="ajax"> .虽然 里面的新内容<main>有吗 ，正确呈现它所需的一些脚本不会被重新调用，因此我最终会丢失元素/损坏的布局。

    我不是唯一一个遇到这个问题的人。快速浏览插件的 support forum on wordpress.org说明这个问题很普遍。
    注意:如果插件有很多其他问题，我不会尝试解决这个问题。它对我有用，我只需要重新启动脚本。
    官方回应是可以通过将以下内容添加到插件的 php 文件中来重新加载/重新启动脚本:
    $.getScript(rootUrl + 'PATH TO SCRIPT');
    哪个有效。它运作良好。例如，如果我添加
    $.getScript(rootUrl + '/Assets/masonry.js');
    然后，即使 masonry.js 是在 ajaxed 之外加载的，在获取 ajaxed 内容时也会重新触发 masonry 函数调用 div我推荐你到 plugin's files on github为了更清楚地了解修复的实际作用(我无法理解使用 $.getScript 时会发生什么)

    总之
    如果您有 3-4 个需要在 ajaxed 内容上重新触发的脚本，则官方修复可以正常工作。
    这对我的目标不起作用，因为
  • 它太死板和硬编码
  • 一些脚本通过 Cloudflare apps 动态添加到页面中

    • 一个可能的解决方案可能涉及添加一个事件来模拟触发器，导致脚本在 ajaxed div 的底部触发。
    题:
    如何强制所有脚本 - 包括动态添加的 - 当页面的某个部分通过ajax重新加载时重新触发？

    笔记:
  • 我试图避免一个一个地调用脚本，因为这需要事先了解他们的调用。我大概是 在我头上说话但...
    我试图模仿页面加载和/或文档就绪事件 - 大多数条件脚本被触发( 如果我错了，请纠正我 ) - 在 <main> 结束时在我的 html 中，当添加新的 ajaxed 内容时，但在通过直接使用 url 加载页面时不影响文档......或任何其他类似方法。
  • 只是为了一点上下文，这是页面上的一些事件监听器列表 当插件关闭时 .我知道里面有些东西我不必触发。我只是添加了这个以供引用。另外，请注意，这是从其中一页中提取的样本。其他页面可能有所不同。

    • DOMContentLoaded
beforeunload
blur
click
focus
focusin
focusout
hashchange
keydown
keyup
load
message
mousedown
mousemove
mouseout
mouseover
mouseup
mousewheel
orientationchange
readystatechange
resize
scroll
submit
touchscreen
unload

    最佳答案

    您在此处选择的解决方案必须取决于脚本的初始化方式。有几种常见的可能性:

  • 脚本的 Action 在加载脚本后立即被调用。在这种情况下，脚本可能如下所示:
    (function() {
     console.log('Running script...');
})();
  • 脚本的操作是为了响应某些事件(例如文档就绪 (JQuery) 或窗口加载 (JavaScript) 事件)而引起的。在这种情况下，脚本可能如下所示:
    $(window).on('load', function() {
    console.log('Running script...');
});

    • 下面考虑了这两种可能性的一些选项。

    对于在加载时立即运行的脚本

    一种选择是删除 <script>要从 DOM 触发的元素，然后重新附加它们。使用 JQuery，你可以做到
    $('script').remove().appendTo('html');

    当然，如果上面的代码片段本身在 <script> 中标签，那么您将创建一个不断分离和重新附加所有脚本的无限循环。此外，可能有些脚本您不想重新运行。在这种情况下，您可以向脚本添加类以正面或负面地选择它们。例如，
    // Positively select scripts with class 'reload-on-ajax'
$('script.reload-on-ajax').remove().appendTo('html');

// Negatively select scripts with class 'no-reload'
$('script').not('no-reload').remove().appendTo('html')

    在您的情况下，您可以将上述代码片段之一放置在 AJAX 完成的事件处理程序中。以下示例使用按钮单击代替 AJAX 完成事件，但概念是相同的(请注意，此示例在 StackOverflow 沙箱中无法正常工作，因此请尝试将其作为单独的页面加载以获得最佳效果) :

    <html>
  <head></head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script class="reload-on-ajax">
    console.log('Script after head run.');
  </script>

  <body>
    <button id="reload-scripts-button">Reload Scripts</button>
  </body>

  <script class="reload-on-ajax">
    console.log('Script after body run.');
  </script>

  <script>
     $('#reload-scripts-button').click( () => $('script.reload-on-ajax').remove().appendTo('html') );
  </script>
</html>


    请注意，如果脚本不是内联的(例如，通过 src 属性获取)，则它们将从服务器重新加载或从浏览器缓存中检索，具体取决于浏览器和设置。在这种情况下，最好的方法可能是删除所有 <script> s 操作 AJAX 加载的内容，并通过类似 JQuery 的 getScript() 加载/运行它们来自 AJAX 完成事件处理程序的函数。这样，您将只在适当的时间(即在加载 AJAX 内容之后)加载/运行脚本一次:
    // In AJAX success event handler
$.getScript('script1.js');
$.getScript('script2.js');

    这种方法的两种变体的一个潜在问题是脚本的异步加载受到跨域限制。因此，如果脚本托管在不同的域上并且不允许跨域请求，则它将不起作用。

    对于响应事件而运行的脚本

    如果脚本在窗口加载时触发，那么您可以触发此事件:
       $(window).trigger('load');

    不幸的是，如果脚本本身使用 JQuery 的文档就绪事件，那么我不知道手动触发它的简单方法。脚本也有可能是为了响应其他一些事件而运行的。

    显然，您可以根据需要组合上述方法。而且，正如其他人所提到的，如果脚本中有一些您可以调用的初始化函数，那么这是最干净的方法。

    关于javascript - 强制重新触发 ajaxed 内容上的所有(脚本/函数)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45626475/

    javascriptajaxedcodegtltajaxwordpresslistenerdom-events

    有关javascript - 强制重新触发 ajaxed 内容上的所有(脚本/函数)的更多相关文章

    1. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

      我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

    2. ruby - 如何以所有可能的方式将字符串拆分为长度最多为 3 的连续子字符串？ - 2

      我试图获取一个长度在1到10之间的字符串，并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符，然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123

    3. ruby - 将数组的内容转换为 int - 2

      我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]

    4. ruby - 如何在续集中重新加载表模式？ - 2

      鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

    5. ruby-on-rails - active_admin 目录中的常量警告重新声明 - 2

      我正在使用active_admin，我在Rails3应用程序的应用程序中有一个目录管理，其中包含模型和页面的声明。时不时地我也有一个类，当那个类有一个常量时，就像这样:classFooBAR="bar"end然后，我在每个必须在我的Rails应用程序中重新加载一些代码的请求中收到此警告:/Users/pupeno/helloworld/app/admin/billing.rb:12:warning:alreadyinitializedconstantBAR知道发生了什么以及如何避免这些警告吗？ 最佳答案 在纯Ruby中:classA

    6. ruby-on-rails - 独立 ruby​​ 脚本的配置文件 - 2

      我有一个在Linux服务器上运行的ruby​​脚本。它不使用rails或任何东西。它基本上是一个命令行ruby​​脚本，可以像这样传递参数:./ruby_script.rbarg1arg2如何将参数抽象到配置文件(例如yaml文件或其他文件)中？您能否举例说明如何做到这一点？提前谢谢你。 最佳答案 首先，您可以运行一个写入YAML配置文件的独立脚本:require"yaml"File.write("path_to_yaml_file",[arg1,arg2].to_yaml)然后，在您的应用中阅读它:require"yaml"arg

    7. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

      我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

    8. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

      我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

    9. ruby - 触发器 ruby​​ 中 3 点范围运算符和 2 点范围运算符的区别 - 2

      请帮助我理解范围运算符...和..之间的区别，作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是

    10. ruby-on-rails - 跳过状态机方法的所有验证 - 2

      当我的预订模型通过rake任务在状态机上转换时，我试图找出如何跳过对ActiveRecord对象的特定实例的验证。我想在reservation.close时跳过所有验证!叫做。希望调用reservation.close!(:validate=>false)之类的东西。仅供引用，我们正在使用https://github.com/pluginaweek/state_machine用于状态机。这是我的预订模型的示例。classReservation["requested","negotiating","approved"])}state_machine:initial=>'requested

    随机推荐