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

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; textalign:center;}      
    div.page_container {backgroundcolor:#C4C4C4; maxwidth: 80%; marginleft: auto; marginright: auto;}
    div.table_area       {backgroundcolor:#ffffc0;}
    div.working_area     {backgroundcolor:#c00000;}
       
    table, form          {width:15em; margin:0 auto;}
    tr.selected          {backgroundcolor:#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/。你的问题太长了,不知道我看懂了没有。

    这里的一个好习惯是为selectunselect创建一个函数,而不仅仅是addClass

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

    希望这可以帮助你。


    原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/268776.html

    (0)
    上一篇 2022年6月20日
    下一篇 2022年6月20日

    相关推荐

    发表回复

    登录后才能评论