2017-01-17 83 views
0

這裏的短TL射擊; DR版本:變化事件停止後jQueryUI的彈出窗口打開和關閉

我對選擇列表中一個onchange事件停止射擊

是否有使用JQuery對元素的任何問題id ie $("#Customer_ID").change,如果該元素位於從部分視圖填充的jqueryui彈出框內。繼此我有兩個不同的彈出窗口由共享同一$("#Customer_ID").change的JavaScript

我有兩個div的jQuery UI的彈出窗口

當我在jqGrid的一個單元格單擊頁面,我彈出不同的部分景色填充相應的對話框(編輯或新)

的彈出式窗口依次填充由局部視圖來自控制器

這工作正常

我有三個級別的級聯d的在這些彈出窗口中猛擊。大多數時候他們正常工作。幾次打開和關閉彈出窗口然而動態下拉停止工作

在這一點上動態下拉jscript正在加載好,但似乎沒有改變事件被觸發。

我懷疑這是因爲我有兩個具有相同名稱控件的彈出窗口?

反正這裏是一些簡略的代碼片斷

_Layout.cshtml

具有對JS參考,重視所有jQueryUI的東西

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

Layout.js

包含設置編輯彈出窗口的代碼和s還有其他的東西。這裏只是爲創建彈出部分:

 $("#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

這實際上有一個jqGrid的就可以了。點擊一個單元格彈出,例如創建彈出窗口。

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

這是通過返回一個局部視圖的控制器供電。這是問題開始的地方。 Customer_ID下拉級聯到CustomerProject_ID下拉列表。幾次關閉並打開後,它停止工作。這也有TasksDialogs.js參考已全部級聯下拉的東西(級聯下拉是另一個問題,這裏的主題:cascading drop downs repeatedly populated

(此代碼在任務中查看文件夾)

<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

最後,我們有這樣的劇本。通常這個工作,但一些彈出後打開和關閉,CustomerID.change不再出現在控制檯中。

你可以看到我試過兩種不同的方式來附加更改事件。兩者都表現出相同的症狀。

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

我不知道我需要發佈控制器代碼。這部分工作正常。

回答

0

在管理動態下拉菜單的JavaScript我用

$("#Customer_ID") 

指領域上的兩個不同的對話框。

原來我需要而使用這些,專指我想要的領域:

$(div#dialog-create #Customer_ID") 

$(div#dialog-edit #Customer_ID") 

我覺得可能更改事件沒有被正確安裝出於同樣的原因。現在我通過在cshtml視圖中硬編碼改變控制來解決這個問題:

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