草庐IT

关于 javascript：JQuery 在 .change() 处理程序之后通过 .load() 重新加载表时丢失初始单击事件

codeneng 2023-03-28 原文

JQuery losing initial click event when reloading a table via .load() after a .change() handler

我正在处理一个复杂的应用程序，其中有两个 div，每个 div 都包含一个单独页面的 HTML/JS。每个 div 都加载到 $(document).ready() 脚本中。顶部 div 包含一个表格，底部 div 包含一个表单。

这两个页??面是绑定(链接)的，如果您单击表格中的一行，它会突出显示该城镇并通过刷新表单 div 将该行数据加载到表单中。此外，如果您更改(编辑)数据表单中的任何字段，它将通过重新加载表格的 HTML 来自动刷新表格，该表格中当前选定的行保持选中状态。

由于更大系统的设计，我对基本方法没有任何控制(两个 div 都在运行中重新加载以反映另一个的变化)。这两个文件实际上并没有相互绑定，而是绑定到 MVC 设计中使用的数据库。

在我的应用程序中，一切正常...单击顶部的一行，您将获得以下数据。更改表单中的值，然后触发 change() 事件(点击 tab、单击字段等)并刷新上表。 C'est tres beaux.

除了...有一个小错误，即当您通过单击表中的一行来触发 change() 事件时，一切正常，除了您单击的行没有获得初始点击事件和该行未突出显示。

这大概是因为表格页面的刷新导致点击事件在最终得到解决时失败(在change()事件之后)。我想我可能可以保存在 cookie 或其他内容中单击的行的标识，然后在加载的 ready() 函数上对其进行检查，但我终其一生都无法在任何地方捕获该初始事件。

我已经创建了一个更简单的问题版本，它以同样的方式失败，并在 http://jsfiddle.net/AKirino/cdhqmp2z/ 创建了一个小提琴。

由于小提琴没有执行表文件中的 ready() 代码的一些问题，我已将所有 js 移至基本文件。我还将表单部分集成到主页中以简化操作。

在测试代码中你可以：

  • 单击表中的一行，该行的文本出现在下部窗口中。
  • 在下部窗口中更改一个值，然后点击选项卡或单击它，它将出现在表格中。
  • 但是，如果您更改表单中的字段，然后通过单击表格中的一行来触发 change() 事件，则表格行不会突出显示。

    • 有什么方法可以在页面刷新之前捕获点击行的初始事件？

    这是我的原始(小提琴前)测试代码。我在 OSX 上的 Safari 中工作并使用 query-1.9.1.

    CSS:

    1
    2
    3
    4
    5
    6
    7
    8
    div {padding:1em; text-align:center;}      
    div.page_container {background-color:#C4C4C4; max-width: 80%; margin-left: auto; margin-right: auto;}
    div.table_area       {background-color:#ffffc0;}
    div.working_area     {background-color:#c00000;}
       
    table, form          {width:15em; margin:0 auto;}
    tr.selected          {background-color:#ffffff}
    td                   {border: 1px solid; padding:.25em;}

    基础文件：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    <html><head>
    <meta charset='utf-8'>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'>
    <link rel="stylesheet" href="refreshTest.css" type="text/css" />
    </head>
    <body>


    $(document).ready(
       
        function( ) {

            $('div.table_area').load('refreshTestTable.html');

            $('input').change(function(event) {
               
                var id = $(this).attr('id');
                console.log('datachanged: '+id);
           
                var myValue = $(this).val();
                $('tr#'+id+' td').html(myValue);
               
                $('div.table_area').load('refreshTestTable.html');

            });    
        });
               




                       
       
       
            <form id='galleryForm'>
                <label for='field1'  id='field1_label' >Field1: </label><input id='field1' autocomplete="off" value='This is field 1' /><br />
                <label for='field2'  id='field2_label' >Field2: </label><input id='field2' autocomplete="off" value='This is field 2' /><br />
                <label for='field3'  id='field3_label' >Field3: </label><input id='field3' autocomplete="off" value='This is field 3' /><br />
            </form>
       
           
       
       
       


    </body>
    </html>

    表格文件：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    <html><head><script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></head>
    <body>


    $(document).ready(

    function( ) {

        $('table').delegate('tr', 'click', function(evt){
           
            var id = $(this).attr('id');
            var myLogMsg = 'tr click: '+id;
            console.log(myLogMsg);
           
            $('tr').removeClass('selected');    // Unselect all
            $(this).addClass('selected');       // Select clicked row
           
            $('div#console').html(myLogMsg);
        });
       
        $('input').each(function(){
           
            var myId = $(this).attr('id');
            $('tr#'+myId+' td').html($(this).val());
        });
    });
               


        <table>
        <tr id='field1'><td>fill1</td></tr>
        <tr id='field2'><td>fill2</td></tr>
        <tr id='field3'><td>fill3</td></tr>
        </table>

    </body>
    </html>

    我已将以下示例用于在初始页面加载后加载的按钮。

    1
    2
    3
    4
    5
    6
    7
    $(document).on("click",".button-class", obj.eventName);
      // where obj.eventName is just a method on my js obj
      // or
    $(document).on("click",".button-class", function(evt){
      // do something
      evt.preventDefault();
    });

    你需要改为on()。 delegate() 处理程序已被弃用(从 jQuery 1.7 开始) -

    1
     $('table').on('click', 'tr', function(evt){

    • 是的，我们也尝试过。不幸的是，同样的结果……没有爱。

    我在这里更新你的 JSFiddle，http://jsfiddle.net/gschutz/cdhqmp2z/13/。你的问题太长了，不知道我看懂了没有。

    这里的一个好习惯是为select和unselect创建一个函数，而不仅仅是addClass。

    你是对的，jquery 没有那么清晰，你必须将这些信息保存在另一个变量中。一个好的做法是只使用后端的数据(如 REST)，并且您不需要再次订购选择某些元素，因为 <tr class="selected"> 不会更改(如果您不重新加载它)。如果您对另一个库感兴趣来制作复杂的应用程序，请尝试 angularjs.org 或 d3js.org。

    希望这可以帮助你。

    javascriptJQueryspanclassnbspasynchronousdomjqueryjquery-events

    有关关于 javascript：JQuery 在 .change() 处理程序之后通过 .load() 重新加载表时丢失初始单击事件的更多相关文章

    1. 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

    2. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

      我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

    3. 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

    4. 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("

    5. ruby - 在 Ruby 中重新分配常量时抛出异常？ - 2

      我早就知道Ruby中的“常量”(即大写的变量名)不是真正常量。与其他编程语言一样，对对象的引用是唯一存储在变量/常量中的东西。(侧边栏:Ruby确实具有“卡住”引用对象不被修改的功能，据我所知，许多其他语言都没有提供这种功能。)所以这是我的问题:当您将一个值重新分配给常量时，您会收到如下警告:>>FOO='bar'=>"bar">>FOO='baz'(irb):2:warning:alreadyinitializedconstantFOO=>"baz"有没有办法强制Ruby抛出异常而不是打印警告？很难弄清楚为什么有时会发生重新分配。 最佳答案

    6. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

      rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

    7. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

      我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

    8. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

      是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？ 最佳答案 您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s

    9. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

      我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

    10. ruby-on-rails - 事件记录 : Select max of limit - 2

      我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

    随机推荐