jQuery - 從點擊事件改變頁面加載功能

Question

我有一個ascx中的jQuery代碼，它從gridview獲取單元格內容並對其進行處理，然後將其寫入其他單元格。

它通過點擊gridview行來激活。 （每行都有一個帶有Word文件名的第一個單元格，用戶點擊一行 - jQuery在第一個單元格中獲取文件名，並將擴展名更改爲flv/mp3 - 檢查是否存在具有新名稱的文件 - 如果有一個文件，它會創建一個圖像鏈接到該文件）

我在這段代碼上努力工作，但現在客戶端想要這個事件（意思是圖像鏈接顯示，如果有一個文件與flv/mp3）將在頁面加載時發生。

我不想再寫一遍，認爲應該有辦法改變點擊事件。

的問題是，我不是很高效使用jQuery :)這個

可以將某些jQuery的能手的幫助？

下面是代碼（我不是與此代碼自豪，但它的工作）：

<script type="text/javascript"> 
    jQuery(function() { 
     jQuery(".SearchResultsGV > tbody > tr:not(:has(table, th))") 
      .css("cursor", "pointer") 
      .one("click", function(e) { 

       var jQuerycell = jQuery(e.target).closest("td"); 


       var jQuerycurrentCellText = jQuerycell.text(); 
       var jQueryleftCellText = jQuerycell.prev().text(); 
       var jQueryrightCellText = jQuerycell.next().text(); 
       var jQuerycolIndex = jQuerycell.parent().children().index(jQuerycell); 
       var jQuerycolName = jQuerycell.closest("table") 
        .find('th:eq(' + jQuerycolIndex + ')').text(); 
       //Check media 1 
       jQuery.ajax({ 
        url: 'http://dtora.org.il/Portals/0/Shiurim/' + jQuerycell.parent().children().first().text().replace('.doc', '.mp3'), 
        type: 'HEAD', 
        error: 
         function() { 
          //do something depressing 
          jQuery(jQuerycell.parent().children().last()).append("<img src=http://dtora.org.il/Portals/0/images/noFiles.png />"); 

         }, 
        success: 
         function() { 
          //do something cheerful :) 
          var jQueryMedia1Name = ('<a href=http://dtora.org.il/Portals/0/Shiurim/' + jQuerycell.parent().children().first().text().replace('.doc', '.mp3') + '><img class="soundFile" src=http://dtora.org.il/Portals/0/images/Music.png /></a>') 
          jQuery(jQuerycell.parent().children().last()).append(jQueryMedia1Name); 

         } 
       }); 
       //Check media 2 
       jQuery.ajax({ 
        url: 'http://dtora.org.il/Portals/0/Shiurim/' + jQuerycell.parent().children().first().text().replace('.doc', '.flv'), 
        type: 'HEAD', 
        error: 
         function() { 
          //do something depressing 
          jQuery(jQuerycell.parent().children().last()).append("<img src=http://dtora.org.il/Portals/0/images/noFiles.png />"); 

         }, 
        success: 
         function() { 
          //do something cheerful :) 
          var jQueryMedia2Name = ('<a href=http://dtora.org.il/Portals/0/Shiurim/' + jQuerycell.parent().children().first().text().replace('.doc', '.flv') + '><img class="videoFile" src=http://dtora.org.il/Portals/0/images/Video.png /></a>') 
          jQuery(jQuerycell.parent().children().last()).append(jQueryMedia2Name); 

         } 
       }); 
      }); 
    }); 
</script> 

Answer 1

做網頁上加載事件的事情就讓它更簡單，我猜。有些事情會改變：

• 使用選擇，你可以找到td元素（細胞）你之後，而不必找到使用event.target屬性的元素（只是追加td您選擇的主體的末尾）

• 我不明白你爲什麼要依靠jQuery.index(el)引用你的元素，爲什麼不使用id屬性？即：

  <th id="th_5"></th> <td id="td_5"></td>

然後，當你在TD元素上運行，你可以這樣做：

var th_id = $(this).attr("id").replace("td", "th"); 
var th_text = $("#" + th_id).text(); 

• jQuery的爲您提供$(this)，一個 句柄點到當前的 元素（您的案例中的td），使用它
• 的jQuery還提供了siblings()方法，所以你可以用它代替的parent().children()

現在對於發生在頁面加載，我會做這樣的事情改變的東西（我把上面的一些變化一些筆記，我希望他們幫助你）：

$(document).ready(function() { 
// being here means that the page is loaded, and we can start 
// iterating over the elements 

// you have to update your selector to choose td elements 
// which I honestly can't tell how with ur selector, UPDATE THIS 
    var my_elements = $(".SearchResultsGV > tbody > tr:not(:has(table, th))"); 

    $.each(my_elements, function() { 
     // not needed anymore, we're using $(this) 
     //var jQuerycell = jQuery(e.target).closest("td"); 

     var currentCellText = $(this).text(); 
     var leftCellText = $(this).prev().text(); 
     var rightCellText = $(this).next().text(); 

     // assuming that you have adapted to assigning ids as I have outlined above 
     var colName = $("#" + $(this).attr("id").replace("td", "th")).text(); 

     // I assume this is the Word file you talked about, save it since you're using it often 
     var files = { 
      mp3: $(this).siblings().first().text().replace('.doc', '.mp3'), 
      flv: $(this).siblings().first().text().replace('.doc', '.flv') 
     } 

     //Check media 1 
     jQuery.ajax({ 
      // I can't tell what you're referencing here, but I think you only have to update jQuerycell with $(this) 
      url: 'http://dtora.org.il/Portals/0/Shiurim/' + files.mp3, 
      type: 'HEAD', 
      error: function() { 
      //do something depressing 

       // you're calling parent().children(), why not call siblings()? :) 
      //jQuery(jQuerycell.parent().children().last()).append("<img src=http://dtora.org.il/Portals/0/images/noFiles.png />"); 
       $(this).siblings().last().append("<img src=http://dtora.org.il/Portals/0/images/noFiles.png />"); 

      }, 
      success: function() { 
       //do something cheerful :) 

       var media1Name = ('<a href=http://dtora.org.il/Portals/0/Shiurim/' 
       + files.mp3 
       + '><img class="soundFile" src=http://dtora.org.il/Portals/0/images/Music.png /></a>') 
       $(this).siblings().last().append(media1Name) 
       // same note here 
       //jQuery(jQuerycell.parent().children().last()).append(jQueryMedia1Name); 

      } 
      }); 
      //Check media 2 
      jQuery.ajax({ 
      url: 'http://dtora.org.il/Portals/0/Shiurim/' + files.flv, 
      type: 'HEAD', 
      error: function() { 
       //do something depressing 
       $(this).siblings().last()).append("<img src=http://dtora.org.il/Portals/0/images/noFiles.png />"); 
      }, 
      success: function() { 
       //do something cheerful :) 
       var media2Name = ('<a href=http://dtora.org.il/Portals/0/Shiurim/' 
        + files.flv 
        + '><img class="videoFile" src=http://dtora.org.il/Portals/0/images/Video.png /></a>') 
       $(this).siblings().last().append(media2Name); 
      } 
     }); 
    }); 
}); 

我希望能回答你的問題，因爲我仍然不確定該代碼的某些部分，請檢查它！

更新：說實話，我不認爲我描述瞭如何引用th或td元素，直到有最佳實踐的方式。我在自己的應用程序中做的是獲取父對象的引用，然後使用選擇器來查找我感興趣的其他元素（同胞）。因此，而不是做：

$(this).attr("id").replace(...) 一個可以簡單地這樣做： var parent = $(this).parent(); ，並從那裏使用選擇處理程序給孩子們。不用說，這會讓您免於爲每個元素生成「唯一」ID字段的麻煩，而且，我相信jQuery選擇器存在出於這個原因;允許你使用DOM引用而不是你設置的任意屬性。在你的應用程序中，你可能需要我沒有看到的東西的id，所以如果你這樣做，你現在知道兩種方式:)

Answer 2

由於你發佈的功能將運行在$(document).ready，它應該是最簡單的方法你只會觸發點擊。

剛剛看完的代碼結束，
實際上：

  }); 
    }); 
</script> 

修改：

   }).click(); 
    }); 
</script>