1

私はjQueryが初めてです。動的にロードされた (AJAX 呼び出し) コンテンツでテーブル行を選択可能にしようとしていますが、機能していません。標準の HTML ページで動作しています。次の作品：

<style>
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
    $(function() {
        $("#selectable").selectable({
            filter: 'tr',
            selected: function(event, ui) {
                alert("row selected");
            }
        });
     });
</script>

<table id="selectable" border="1px">
    <tr><td>val1</td><td>Val2</td></tr>
    <tr><td>Val3</td><td>Val4</td></tr>
    <tr><td>Val5</td><td>Val5</td></tr>
</table>

divしかし、このデータをusingにロードすると、$("my-div").html(same-data-from-ajax).trigger('create')機能しません。

これは私が持っているものです:

  • ボタンが 1 つのメイン html

  • js と:

    $("#button").click(function {
    $.ajax({
        url: "./php/testselect.php", // this returns above html code
            cache: false,
            success: onSuccessSelect,
            error: onError
        });
});
function onSuccessSelect(data, status) {
    $("#my-div").html(data).trigger('create');
}

私は何か間違ったことをしていますか？

4

2 に答える 2

0

私は同じ問題を抱えていましたが、どの解決策もうまくいきませんでした。選択可能は onpageload javascript 実行に適用できるようです。mgibsonbr が提供するフィドルは私にとってはうまくいきませんでした。私がやったことはハックであり、それは汚いものです。

要素を追加した後、サーバーに触れずにキャッシュからページをリロードするだけです。

location.reload();

于 2013-03-20T20:11:06.987 に答える
0

あなたの場合の最も簡単な解決策はselectable、新しく作成された要素に再適用することだと思います：

function onSuccessSelect(data, status) {
    $("#my-div").html(data).trigger('create');
    $("#my-div").find("#selectable").selectable({
        filter: 'tr',
        selected: function(event, ui) {
            alert("row selected");
        }
    });
}

また、選択可能にしたいテーブルが複数ある場合は、id の代わりにクラスを使用することをお勧めします (例: <table class="selectable">and find(".selectable"))。

于 2012-12-19T22:38:46.353 に答える