1

私はフィラメントグループ JQuery selectmenu ウィジェットを使用しています。ウィジェットはページの head セクションで初期化されます。ページが初めて読み込まれると、Jquery はウィジェットを正常に読み込みますが、ajax 呼び出し (POST を使用したフォーム送信) の後、selectmenu ウィジェットは動作を停止します (初期化されません)。Enterキーを押してフォームを送信するために入力テキストフィールドを使用すると同じ問題が発生しましたが、デリゲートメソッドを使用して、選択した要素にイベントハンドラーをアタッチしました。そして、それはうまくいきました。私の質問は、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>
4

1 に答える 1

0

成功のコールバックで再バインドする

   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();
                    }
            });                                                                     
          }
于 2012-03-12T09:19:20.390 に答える