Comment résoudre les objects en double dans la page de chargement dynamic en utilisant jQuery?

Je veux résoudre les objects en double dans le chargement dynamic du contenu. Veuillez regarder le code source suivant pour mieux comprendre.

Page de base HTML avec 1 contenu de chargement dynamic

 
> 
  Dynamic Content will be placed inside this.

Pour le script dans l’en-tête de cette page, il est très facile de sélectionner l’object “general-div” comme le code suivant.

  $('#general-div')

Il est assez facile de sélectionner un object “inner-div” dans placeholder1. Je peux donc sélectionner en utilisant le code ci-dessous.

  $('.inner-div')

Le code ci-dessus pourrait fonctionner parfaitement. Cependant, je ne peux pas utiliser le code ci-dessus s’il y a plus d’un object dupliqué dans le même document, comme le code HTML suivant. Le code ci-dessus renverra 2 objects qui ne correspondent pas à ce que je veux.

Base Page HTML – Après le chargement d’un autre contenu de chargement dynamic

  
> 
  Dynamic Content will be placed inside this. 
 
 
  Dynamic Content will be placed inside this.

Solution possible 1

Je dois créer l’object jQuery spécifié pour chaque script dans le chargement dynamic du contenu, comme le code suivant.

  // Deep copy for jQuery object. var specfiedjQueryObj = $.extend(true, {}, jQuery); // modify find function in jQuery object. specfiedjQueryObj.fn.find = function(selector) { // by adding placeholder selector before eval result. return new specfiedjQueryObj.fn.old_find('#placeholder1 ' + selector); }; // So, I can select any object in dynamic loading content. (function($) { // This result must be 1 object. $('.div1'); })(temp);

Même si, cette solution devrait être un excellent travail. Mais j’ai trouvé que jQuery est un object très complexe. J’ai trouvé beaucoup d’erreurs lorsque j’essaie de l’utiliser.

Avez-vous une idée pour résoudre ce problème?

PS L’identifiant PlaceHolder n’est pas un identifiant fixe. Donc, il est impossible de le corriger dans la règle de sélection. De plus, je ne connais pas exactement la quantité d’élément et la position (premier, dernier ou milieu) dans le document. En raison du chargement dynamic, le contenu sera affiché sur de nombreuses pages.

Que diriez-vous de $('div[id^=placeholder]:last') ?

Selectors / attrubuteStartsWith

Vous pouvez simplement utiliser $('.innerdiv:first') pour obtenir le premier ou $('.inner-div:last') pour obtenir le dernier . Ou si vous avez des multiples et que vous voulez sélectionner un particulier $('.inner-div:nth(x)') où x est l’indice de l’élément.

La fonction suivante traitera les données de la page de vue de chargement partiel et appenda le contexte spécifié pour chaque sélecteur jQuery dans le script. Cette réponse fonctionne bien. Cependant, il ne supporte pas le fichier de script externe.

 function renderPartialView(control, data) { // For detecting all script tag in loaded data. var reExtractScript = /(

Bon, parlons de votre exemple HTML. J’ai ajouté une classe d’espaces réservés et un tiret dans l’ID pour plus de commodité.

  Dynamic Content will be placed inside this. baz
 zip
 action 
  Dynamic Content will be placed inside this. foo
 bar
 action

Maintenant, je peux lier un événement à chacun de ces liens avec $('.placeholder a.action').bind('click', ... ); Si je veux que cet événement concerne tous les morceaux de code HTML comme celui-ci sur la page, je fais $('.placeholder a.action').live('click', ... );

Ce code va attacher un événement à ces liens et les instructions var peuvent capturer l’id ou le texte interne du

s. De cette façon, vous n’avez pas de valeurs d’atsortingbut id en collision, mais vous pouvez traverser des actions à l’intérieur de div avec un espace réservé de classe.

 $('.placeholder a.action').live('click', function(){ // get the id var id = $(this).parents('div.placeholder').attr('id').split('-')[1]; // get the text inside the div with class inner-div var inner_div = $(this).parents('div.placeholder').children('.inner-div').text(); // get the text inside the div with class div1 var div1 = $(this).parents('div.placeholder').children('.div1').text(); return false; });