arrête l'événement de changement de tir après popups jQueryUI ouvert et fermé

Question

est ici court TL, la version DR:

J'ai un événement onchange contre une liste de sélection qui arrête le tir

Y at-il problème en utilisant JQuery contre un élément id c'est-à-dire $("#Customer_ID").change, si cet élément se trouve dans une fenêtre contextuelle jqueryui qui est remplie à partir d'une vue partielle. Suite à cela, j'ai deux popups différents peuplés par différentes vues partielles qui partagent le même $("#Customer_ID").change javascript

J'ai une page avec deux divs pour jquery ui popups

Lorsque je clique dans une cellule jqGrid, je contextuellle dialogue approprié (Modifier ou Nouveau)

Les popups sont à leur tour peuplé par une vue partielle d'un contrôleur

Cela fonctionne très bien

J'ai trois niveaux de cascade d abattre bas dans ces popups. La plupart du temps, ils fonctionnent correctement. Après quelques ouvertures et fermetures des fenêtres contextuelles, les listes déroulantes dynamiques cessent de fonctionner

À ce stade, la liste déroulante dynamique jscript est en cours de chargement, mais il semble que l'événement de changement ne soit pas déclenché.

Je suppose que c'est parce que j'ai deux popups avec des contrôles de même nom?

Quoi qu'il en soit voici quelques fragments de code abrégés

_Layout.cshtml

a une référence aux js qui se fixe tous les trucs jQueryUI

<!-- Logic to setup edit,new,delete popups --> 
<script src="~/Scripts/Layout.js" type="text/javascript"></script> 

Layout.js

Contient du code pour configurer le menu contextuel d'édition et s quelques autres choses. Voici juste la partie pour la création pop-up:

 $("#dialog-create").dialog({ 
      title: 'New', 
      autoOpen: false, 
      resizable: true, 
      width: 800, 
      height: 440, // this allows the dialog to correctly estimate the middle of the viewport 
      show: { effect: 'fade', duration: 100 }, 
      modal: true, 
      open: function (event, ui) { 
       if (urlNew) $(this).load(urlNew); 
      }, 
     }); 

TasksWeeklyClient.cshtml

Cela a en fait un jqGrid sur elle. En cliquant sur une cellule apparaît, par exemple le popup de création.

<!-- edit, new, delete popups --> 
<div id="dialog-edit" style="display: none; z-index: 2000;"> 
</div> 

<div id="dialog-create" style="display: none; z-index: 2001;"> 
</div> 

Create.cshtml

Ceci est alimenté par un dispositif de commande qui renvoie une vue partielle. C'est là que les problèmes commencent. Le Customer_ID affiche les cascades dans la liste déroulante CustomerProject_ID. Après quelques fermetures et ouvre, il ne fonctionne plus.Cela a aussi une référence à TasksDialogs.js qui a toute la cascade déroulant des choses (La cascade déroulant fait l'objet d'une autre question: cascading drop downs repeatedly populated

(ce code se trouve dans les tâches voir le dossier)

<div class="form-group"> 
    @Html.LabelFor(model => model.Customer_ID, "Customer & Project", htmlAttributes: new { @class = "control-label col-md-6 text-md-left" }) 
    <div class="col-md-12"> 
     @Html.DropDownList("Customer_ID", null, htmlAttributes: new { @class = "form-control" }) 
     @Html.ValidationMessageFor(model => model.Customer_ID, "", new { @class = "text-danger" }) 
    </div> 
    <div class="col-md-12"> 
     @Html.DropDownList("CustomerProject_ID", null, htmlAttributes: new { @class = "form-control" }) 
     @Html.ValidationMessageFor(model => model.CustomerProject_ID, "", new { @class = "text-danger" }) 
    </div> 

TaskDialogs.js

Enfin, nous avons ce script. Normalement, cela fonctionne, mais après quelques pop-up ouvre et ferme, CustomerID.change n'apparaît plus dans la console.

Vous pouvez voir que j'ai essayé deux manières différentes d'attacher l'événement change. Les deux présentent le même symptôme.

$(document).ready(function() { 
    console.log("TasksDialog.js ready"); 

    console.log($("#Customer_ID")); 
    //When Customer is changed reload Project 
    // Project function reloads project tasks 
    $("#Customer_ID").on("change", 
// $("#Customer_ID").change(
     function() { 
      console.log("CustomerID.change"); 
      // refresh projects 
      refreshProjectFromClient(); 
     } 
     ); 

Je ne sais pas si j'ai besoin de publier du code de contrôleur. Cette partie fonctionne très bien.

Answer 1

Dans le javascript qui gère les menus déroulants dynamiques que j'utilisais

$("#Customer_ID") 

de se référer à des champs sur deux dialogues différents.

s'avère que je dois utiliser à la place, de se référer spécifiquement au domaine que je veux:

$(div#dialog-create #Customer_ID") 

$(div#dialog-edit #Customer_ID") 

Je pense que peut-être l'événement de changement n'est pas correctement fixé pour la même raison. Pour l'instant je l'ai contourné en codant en dur le changement dans le contrôle dans la vue cshtml comme ceci:

@Html.DropDownList("Customer_ID", null, 
htmlAttributes: 
new { 
@class = "form-control", 
@onchange= "refreshProjectFromClient()" 
})