knockout.js AfterRender階段不會在一個jQuery彈出

<div data-bind="style: { display: !koIsHidden() ? 'inline-block' : 'none'}"> 
<button id="hideButton" type="button" title="Hide" onclick="javascript:openJuiPopup('#hidePopup')" style="background: none; border: none"> 
    <i id="hideCross" class="fa fa-2x fa-times" data-bind="attr: { 'data-applicationKey': application.applicationKey }"></i> 
</button> 
</div>

此按鈕的工作負擔，看起來像這樣knockout.js AfterRender階段不會在一個jQuery彈出

爲彈出的代碼看起來像一個彈出：

<div id="hidePopup" class="popup ui-content" data-role="popup"> 
    <!-- ko foreach: { data: previewApplications(), afterRender: renderPopup} --> 
    <form id="hider" style="display:inline;" method="post" data-bind="attr: {action: '@(MVC.GetLocalUrl(MVC.HireOrgJobApplication.ViewApplication(Model.CurrentOrganization.CustomUrl, Model.Job.JobKey, "xxx/ajax-hide")))'.replace('xxx', application.applicationKey)}"> 
     @Html.AntiForgeryToken() 
     <input type="hidden" name="ApplicationKey" data-bind="attr:{ value : application.applicationKey }" /> 
     <input type="hidden" name="HideReasonId" value="7" /> 


     <button type="submit" class="btn btn-danger jui-tooltip" data-bind="text: application.hideButtonSendRejectionInsteadOfHide === true ? 'Reject' : 'Hide', attr: { title: application.hideButtonSendRejectionInsteadOfHide === false ? 'Reject' : 'Hide'}"></button> 

    </form> 
    <!--/ko--> 
</div>

並調用它的js代碼：

  $("#hidePopup").dialog({ 
       dialogClass: "no-close", 
       position: { my: "bottom", at: "bottom", of: $("#hideCross"), collision: "none" }, 
       autoOpen: false, 
       draggable: true, 
      }).dialog("widget").find(".ui-dialog-titlebar").hide();

細節並不重要，但有一件事在這段代碼中重要的是

<!-- ko foreach: { data: previewApplications(), afterRender: renderPopup} -->

由於淘汰賽JS的一個AfterRender功能，這應該通過previewApplications元素循環（）和運行功能renderPopup。

的renderPopup看起來像

   self.renderPopup = function (element, data) { 

        $(element).find("form#hider").ajaxForm(function() { 
         alert("heyyyyy"); 
        }); 

       };

這應該只是簡單地找到ID =藏起來一種形式，並運行警報（「heyyyy」）。但它不起作用。

請注意，當我把它放在彈出窗口外時，afterRender完全正常工作。

請幫忙！

編輯：

我可以添加更多信息到這個問題。這不是關於afterRender，但ajaxForm不適用於彈出窗口。有什麼想法？

EDIT2：

   self.renderApplication = function (element, data) { 

        filter: ($(element).filter("form#hider")[0]).ajaxForm(function() { 
         data.koIsHidden(true); 
        }); 

       };

我嘗試這樣做，

    $(element).filter(("form#hider")[0]).ajaxForm(function() { 
         data.koIsHidden(true); 
        });

上面的代碼給了我，我在評論中寫道錯誤，而第二個讓我沒有錯誤，但還是犯規捕獲renderApplication函數。

來源

2017-06-21 Dukakus17

如果你在'ko foreach'裏面有'form id =「hider」'，你將創建多個具有相同ID的表單。可能不是問題的根源，但這是一個問題。 –

從de jQuery文檔中，find（）獲得當前匹配元素集中每個元素的後代...。你需要用'filter'替換它：'（$（element）.filter（「form＃hider」）[0]）。ajaxForm（...'。 –

我修正了它像EDIT2，但它說「無法讀取未定義的屬性'ajaxForm' – Dukakus17

調用renderPopup像一個函數 - afterRender：renderPopup（）或者您可能必須嘗試$ root.renderPopup（）或$ parent.renderPopup（）。

來源

2017-06-23 16:55:10 JaxCoder

knockout.js AfterRender階段不會在一個jQuery彈出

回答

相關問題