jQuery $(document).ready()问题 - jQuery 1.7.2

时间:2013-08-13 13:40:27

标签: jquery-ui jquery

我有一个页面,我正在加载一个select标签,其中包含从ajax调用到服务的选项。它正常工作并正确加载选择标签。我只希望在用户第一次到达页面时发生这种加载,所以我把调用放在$(document).ready(函数调用)中执行此操作的函数。我看到的问题是当用户选择其中一个选项,然后在某些情况下单击一个按钮我会弹出一个对话框(jQuery UI),告诉他们需要采取某种行动。第一次发生这种情况,并且只有第一次选择的选项才会被重置到某个地方列表中的第一个选项。我在调试中运行了很多次,并发现如果这是第一次在页面上选择器在到达页面时按预期加载,但如果对话框弹出,则会再次加载 - 只有第一次时间 - 如果对话框弹出后,重新加载不会发生,一切都很好。缩写代码:

$(document).ready(function () {
    $.fn.LoadStuff();
});

jQuery.fn.LoadStuff = function () {
    //load up the select tag with options
};

LoadStuff在其他任何地方都没有被调用。 selOffers是select标签,dvConflict是对话框。他们没有共享一个共同的父div。

<select id="selOffers"></select> 

<div id="dvConflict"><div id="dvConflictMsg" /></div>

对话框的jQuery:

var optSave = {
width: 400,
modal: true,
resizable: false,
draggable: false,
closeOnEscape: true,
zIndex: 1320,
buttons: [
    {
        text: 'Ok',
        click: function () {
            $(this).dialog('close');
        }
    }
]

}

$(".ui-dialog-titlebar").hide(); //Hides the title

$('#dvConflict')。css('background','none'); //拿出我们的自定义背景 $( '#dvConflict')对话框(optSave);

1 个答案:

答案 0 :(得分:1)

编辑:两件事

  1. 使用$.LoadStuff = function () { }代替$.fn.LoadStuff = function () {...}。第一个是通过$.LoadStuff();在任何情况下调用。后者将用于元素选择,如$("div.to-load").LoadStuff();

  2. 每次DOM完成加载时都会触发
  3. $(document).ready。在一些AJAX调用中,您可能正在重新加载DOM的一部分或内部框架(我不知道,虽然我没有您的代码)。

    以下代码示例将帮助您绕过问题:

    var first = true;  
    $(document).ready(function () {  
        if (first) $.LoadStufF();  
        ...    
        first = false;  
    }
    
  4. 打开对话框时,请确保对话框包含的元素中没有<script>个标记。假设你有代码行:

    $('#dialoged').dialog({ ... });
    

    所以不好的做法是:

    <div id="dialoged">
        <script>
             var first = true;  
             $(document).ready(function () {  
                 if (first) $.LoadStufF();  
                     ...    
                 first = false;  
             }
         </script>
    </div>