2014-09-30 20 views
3

我有一個複雜的應用工作後,通過.load()重裝表時失去最初的點擊事件,其中有各自的兩個div包含HTML/JS一個單獨的頁面。每個div都加載到$(document).ready()腳本中。頂部div包含表格,底部div包含表單。JQuery的一個.change()處理

兩個頁面的裝訂(鏈接)的,如果你點擊表中的行它強調了城鎮並加載該行的數據到表單通過刷新表單股利。另外,如果您更改(編輯)數據表單中的任何字段,它將自動刷新表格,方法是重新加載表格的HTML,並且該表格中當前選定的行保持選定狀態。

因爲更大的系統的設計我真的沒有過的基本方法(兩個div都被重新加載在飛行,以反映在其他的變化)的任何控制。兩個文件實際上並沒有彼此綁定,而是綁定到MVC設計中使用的數據庫。

在我的應用程序一切工作就好了... ...點擊頂部一排,你會得到下面的數據。更改表單中的值,然後導致更改()事件觸發(點擊選項卡,單擊字段等),並刷新上表。 C'est tres beaux。

除了...有一個小錯誤,當您通過單擊表中的一行來觸發change()事件時,一切正常工作除了您單擊的行沒有獲得初始的單擊事件並且該行不會突出顯示。

這大概是因爲表頁面的刷新導致click事件,當它終於得到解決失敗(的變化()事件之後)。我認爲我可以保存在cookie中被點擊的行的身份,然後在負載的ready()函數中檢查它,但是我不能在我的生活中隨時隨地捕捉最初的事件。

我創建了一個簡單得多的問題版本,它以相同的方式失敗,http://jsfiddle.net/AKirino/cdhqmp2z/創建了一個小提琴。

由於小提琴未執行表格文件中的ready()代碼時出現了一些問題,我將所有js都移到了基本文件中。我還將表單部分集成到主頁面以簡化事情。

在測試代碼中,您可以: 1)單擊表中的一行並查看該行的文本出現在較低的窗口中。 2)在下面的窗口中改變一個值,然後點擊tab或點擊它,它會出現在表格中。 3)然而,如果您更改表單中的字段,然後通過單擊表中的一行來觸發change()事件觸發,則表格行不會高亮顯示。

有沒有什麼辦法來捕捉頁面刷新前點擊行的初始事件?

這是我原來的(預小提琴)測試代碼。我在OSX上使用Safari並使用query-1.9.1。

CSS:

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;} 

BaseFile:

<html><head> 
<meta charset='utf-8'> 
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script> 
<link rel="stylesheet" href="refreshTest.css" type="text/css" /> 
</head> 
<body> 

<script> 
$(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'); 

     });  
    }); 

</script> 

<div class='page_container'> 

    <div class='table_area'></div>     
    <div class='working_area'> 

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

     <div id="console">&nbsp;</div> 

    </div> 

</div> 

</body> 
</html> 

TableFile:

<html><head><script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script></head> 
<body> 

<script> 
$(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()); 
    }); 
}); 

</script> 

    <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

您需要更改爲on()。該delegate()處理程序已被棄用(在jQuery 1.7) -

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

是的,我們也試過。不幸的是同樣的結果......沒有愛。 – AKirino 2014-09-30 21:00:37

1

我用於加載初始頁面後,已加載按鈕下面的例子。

$(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(); 
}); 
0

我在這裏更新你的JSFiddle,http://jsfiddle.net/gschutz/cdhqmp2z/13/。你的問題太長了,我不知道我是否理解。

這裏的一個好的做法是爲selectunselect而不僅僅是addClass

你是對的,jquery不是很聰明,你必須將這些信息保存在另一個變量中。一個好的做法是隻在後端(如REST)上處理數據,並且不需要再次命令選擇某個元素,因爲<tr class="selected">不會更改(如果不重新加載它)。如果您對另一個lib感興趣以製作複雜的應用程序,請嘗試angularjs.orgd3js.org

希望這可以幫助你。