jQuery - change la fonction de l'événement click au chargement de la page

Question

J'ai un code jQuery dans un ascx qui prend un contenu de cellule à partir d'un gridview et le manipule, puis l'écris dans une autre cellule.

Il est activé par un clic sur la ligne gridview.

(Chaque ligne a une 1ère cellule avec un nom de fichier Word L'utilisateur clique sur une ligne - jQuery prend le nom du fichier dans la première cellule et change l'extension en flv/mp3 - vérifie s'il y a un fichier avec le nouveau nom - s'il y a un fichier il crée un lien d'image vers ce fichier)

J'ai travaillé dur sur ce code mais maintenant le client veut que l'événement (signifiant que les liens d'image montrent s'il y a un fichier avec le flv/mp3) se produira au chargement de la page.

Je ne veux pas tout écrire à nouveau et je pense qu'il devrait y avoir un moyen de changer l'événement click.

Le problème est que je ne suis pas très efficace avec jQuery :)

Can aide de jQuery sur ce champion?

Voici le code (je ne suis pas fier de ce code, mais il fait le travail):

<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

Faire des choses sur l'événement de chargement de la page rendrait plus simple je suppose. Certaines choses vont changer:

• En utilisant les sélecteurs, vous pouvez trouver les td éléments (cellules) que vous êtes après, au lieu d'avoir à trouver l'élément en utilisant la propriété event.target (juste ajouter td à la fin de votre corps de sélecteur

• Je ne comprends pas pourquoi vous dépendez de jQuery.index(el) pour référencer vos éléments, pourquoi ne pas utiliser les propriétés d'id? à savoir:

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

Ensuite, lorsque vous utilisez sur l'élément td, vous pouvez faire:

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

• jQuery vous fournit $(this), une poignée que les points à l'élément actuel (le td dans votre cas), utilisez-le
• jQuery fournit également une méthode siblings(), vous pouvez l'utiliser au lieu de parent().children()

maintenant pour changer les choses de se produire sur la charge de la page, je ferais quelque chose comme ça (je mets des notes ci-dessus quelques changements, i espérons qu'ils vous aider):

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

J'espère que cela répond à votre question, je ne suis toujours pas sûr de certaines parties de ce code, le revoir!

Mise à jour: En vérité, je ne considère pas la façon dont je l'ai décrit comment référencer th ou td éléments là-bas est plus pratique.Ce que je fais dans mes propres applications est d'obtenir une référence au parent, puis d'utiliser des sélecteurs pour trouver les autres éléments qui m'intéressent (frères et sœurs). Ainsi, au lieu de faire:

$(this).attr("id").replace(...) on pourrait simplement faire: var parent = $(this).parent(); et obtenir des gestionnaires aux enfants à partir de là en utilisant les sélecteurs. Inutile de dire que cela vous éviterait de devoir générer des champs d'identification "uniques" pour chaque élément, et bien, je crois que les sélecteurs jQuery existent pour cette raison; pour vous permettre de référencer en utilisant le DOM pas une propriété arbitraire que vous définissez. Dans votre application, vous pourriez avoir besoin de l'identifiant pour quelque chose que je n'ai pas vu, donc si vous le faites, vous connaissez les deux façons maintenant :)

Answer 2

Comme la fonction que vous avez affichée fonctionnera au $(document).ready, ce devrait être la manière la plus simple si vous ne déclenchez que le clic.

Juste à regarder à la fin du code,
fait:

  }); 
    }); 
</script> 

modification:

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