javascript - AJAX を使用して X-editable で値を更新できません

Question

x-editableプラグインのブートストラップ バージョンを使用してurl、テーブルにある値を更新しています。ユーザーがボックスの値を変更すると、ストアselectに対応する値を取得するために ajax 呼び出しが起動されます。urlURL値を更新する前に毎回x-editableイベントのバインドを解除していますが、何かが正しくありません。URL は 1 回だけ更新され、残りの選択変更イベントでは同じままです。

<select id="search">
    <option value='1'>store 1</option>
    <option value='2'>store 2</option>
    <option value='3'>store 3</option>
</select>

<table>
    ...
    <tbody>
        <tr>
            <td><a href='#' id='url_qa'></a></td>
        </tr>
    </tbody>
</table>

    // Select box change event
    $('#search').change(function() {
        // ajax call to load the url based on chosen select value
        $.ajax({ 
            url: 'load.php',
            type: 'post',
            dataType: 'json',
            data: {'id': $(this).val()},
        }).done(function(data) {
            $('#url').editable('destroy'); // destroy editable
            $('#url').editable({
                type: 'text',
                pk: 1,
                url: '/post',
                title: 'Enter username',
                value: data['url']
            });
        }).fail(function() {
            alert('Error: Unable to fetch information for the chosen id');
        });
    });

選択値を変更すると、次のことが起こります

• 選択値を初めて変更すると、URL が空になり、更新されません。

• しかし、選択値を2回目に変更すると、URLが変更されます。

• そして、この後のすべての選択値の変更について、2 番目の URL はまったく更新されません。

デモ: JSFiddle