草庐IT

javascript - 检测在 javascript 中删除的 DOM 项目

coder 2025-01-15 原文

我正在编写一个带有 ID 的插件。它向该 id 添加一些代码并启动一些事件。我发现的问题是,如果容器后来被覆盖,我找不到关闭事件的方法,这样它们就不会继续运行。下面是一个演示脚本来展示我已经尝试过的内容。我似乎无法找到检测 test2 不存在并清除间隔的方法。

$(function() {
				
  /* *********************************
  *  Simple example of something that could be done
  *  being told to work on id test2
  ********************************* */
				
  var a=0;
  $("#test2").append('<br>I Ran');
  var id=setInterval(function() {
    console.log("running");		//ctrl+shift+j will see message every second
  },1000);
					
  //try to remove id test2 is removed
  $(document).on("DOMNodeRemoved", function (e) {
    console.log(e.target.id,e.target);
    if (e.target.id=="test2") { //is never true since test2 was added by jquery
		clearInterval(id);	//stops message from being writen
    }
  })
					
					
  /* *********************************
  *  Some other part of app that wipes away the above script is playing with
  ********************************* */
					
$(document).on('click','#del',function(){
  $("#test").html('wipe out');	//replaces content of div test with test2.html 			
  });
				
});
			
<!DOCTYPE html>
<html lang="en">
  <header> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  </header>
  <body>
  <div id="test">
  <div id="2" class="test">
    <div id="test2">help</div>
  </div>
  </div>
  <div id="del">Press here to remove</div>
  </body>
</html>

最佳答案

问题是您正在删除 test2 的父级,因此目标永远不会成为您测试的对象。要解决这个问题,请在您的条件尝试中:

if ($(e.target).find("#test2").length) {
    clearInterval(id);
}

$(function() {
				
  /* *********************************
  *  Simple example of something that could be done
  *  being told to work on id test2
  ********************************* */
				
  var a=0;
  $("#test2").append('<br>I Ran');
  var id=setInterval(function() {
    console.log("running");		//ctrl+shift+j will see message every second
  },1000);
					
  //try to remove id test2 is removed
  $(document).on("DOMNodeRemoved", function (e) {
    console.log(e.target.id,e.target);
    if ($(e.target).find("#test2").length) {
		clearInterval(id);
    }
  })
					
					
  /* *********************************
  *  Some other part of app that wipes away the above script is playing with
  ********************************* */
					
$(document).on('click','#del',function(){
  $("#test").html('wipe out');	//replaces content of div test with test2.html 			
  });
				
});
			
<!DOCTYPE html>
<html lang="en">
  <header> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  </header>
  <body>
  <div id="test">
  <div id="2" class="test">
    <div id="test2">help</div>
  </div>
  </div>
  <div id="del">Press here to remove</div>
  </body>
</html>

关于javascript - 检测在 javascript 中删除的 DOM 项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39989858/

有关javascript - 检测在 javascript 中删除的 DOM 项目的更多相关文章

  1. ruby - 如何在 buildr 项目中使用 Ruby 代码? - 2

    如何在buildr项目中使用Ruby?我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序,我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/),但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻,因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  2. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据,就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理?我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题;这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML,但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中,将我的XML代码修改为

  3. ruby - 我可以使用 Ruby 从 CSV 中删除列吗? - 2

    查看Ruby的CSV库的文档,我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列,但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html

  4. ruby - 我可以使用 aws-sdk-ruby 在 AWS S3 上使用事务性文件删除/上传吗? - 2

    我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后,每个操作都应在S3上回滚。S3Object这可能吗?? 最佳答案 虽然S3API具有批量删除功能,但它不支持事务,因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST),因此每个上传操作都是通过一个独立的API调用完成的

  5. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0,我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时,我通过运行railss并访问localhost:3000确保该应用程序正常运行以前,我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后,由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0,此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  6. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

  7. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样?我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用,需要1秒才能返回,我有100,000多个页面要访问,所以我试图运行多个线程来解决这个问题。有更好的方法吗?classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  8. Ruby 从大范围中获取第 n 个项目 - 2

    假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目? 最佳答案 一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做,或者如果你需要避免为前N个元素构建中间数组,你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit

  9. ruby - 如何安全地删除文件? - 2

    在Ruby中是否有Gem或安全删除文件的方法?我想避免系统上可能不存在的外部程序。“安全删除”指的是覆盖文件内容。 最佳答案 如果您使用的是*nix,一个很好的方法是使用exec/open3/open4调用shred:`shred-fxuz#{filename}`http://www.gnu.org/s/coreutils/manual/html_node/shred-invocation.html检查这个类似的帖子:Writingafileshredderinpythonorruby?

  10. ruby-on-rails - 标准化文件名的字符串,删除重音和特殊字符 - 2

    我正在尝试找到一种方法来规范化字符串以将其作为文件名传递。到目前为止我有这个:my_string.mb_chars.normalize(:kd).gsub(/[^\x00-\x7F]/n,'').downcase.gsub(/[^a-z]/,'_')但第一个问题:-字符。我猜这个方法还有更多问题。我不控制名称,名称字符串可以有重音符、空格和特殊字符。我想删除所有这些,用相应的字母('é'=>'e')替换重音符号,并将其余的替换为'_'字符。名字是这样的:“Prélèvements-常规”“健康证”...我希望它们像一个没有空格/特殊字符的文件名:“prelevements_routin

随机推荐