Question

我正在使用filamentgroup JQuery selectmenu小部件。小部件在页面的head部分初始化。当第一次加载页面时，Jquery成功加载了widget，但是在ajax调用之后（使用POST提交表单）selectmenu widget停止工作（不初始化）。我在输入键按下时使用输入文本字段提交表单时遇到了同样的问题，但后来我使用委托方法将事件处理程序附加到所选元素。它奏效了。所以我的问题是：如何在AJAX调用后重新初始化selectmenu。也许我可以使用相同的委托方法进行初始化。我用谷歌搜索，但没有发现任何初始化小部件的JQuery事件。这是代码段

<head>
<script type="text/javascript">
$(document).ready(function() 
{
    $('select').selectmenu
        ({
            width: 70,
            style: 'dropdown',
            menuWidth: 100,
            maxHeight: 400,
            change: function() 
                {
                    $(this).parents('form').submit();
                }
        });

    $('body').delegate('.submit', 'keydown', function(e)
        {
            if (e.keyCode == 13) 
                {
                    $(this).parents('form').submit();
                    return false;
                }
        });

    $('#regFormID').submit(function()
        {
            $.ajax(
                {
                    type: 'POST',
                    url: 'index.php',
                    data: $(this).serialize(),
                    error: function(xml, status, error) 
                    {
                        $('#dataFilterID').html('<p><strong>Error Code:</strong> '+status+'</p><p><strong>Explanation:</strong> '+error+'</p>');
                    },
                    success: function(data, textStatus, jqXHR)  
                    {
                        $('#dataTableID').html($(data).find('#dataFilterID').html());                                                                   
                    }                                                                                   
                });
            return false;
        }   
});
</script>         
</head>

<body>
<div id="#dataFilterID">
<form id="regFormID" class="reg-form" name="regForm" method="POST" action="">
    <select class="select" id="Filter-dbPage-count" name="Filter-dbPage-count">
    <option selected="selected" value="30">30</option>
    <option value="50">50</option>
    <option value="100">100</option>
    <option value="150">150</option>
    <option value="200">200</option>
    </select>
<input type="text" value="" class="submit " id="Filter-dbField-1" name="Filter-dbField-1">
<input type="text" value="" class="submit " id="Filter-dbField-2" name="Filter-dbField-2">
<input type="text" value="" class="submit " id="Filter-dbField-3" name="Filter-dbField-3">
</form>
</div>    
</body>

Answer 1

重新成功回调

   success: function(data, textStatus, jqXHR)  
    {
    $('#dataTableID').html($(data).find('#dataFilterID').html());  
    $('select').selectmenu
            ({
                width: 70,
                style: 'dropdown',
                menuWidth: 100,
                maxHeight: 400,
                change: function() 
                    {
                        $("select").parents('form').submit();
                    }
            });                                                                     
          }

在ajax调用之后，JQuery selectmenu不会初始化

1 个答案: