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>

但是，如果我将这些数据加载到divusing 中$("my-div").html(same-data-from-ajax).trigger('create')，则它不起作用。

这就是我所拥有的：

  • 一键式主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

我相信在您的情况下最简单的解决方案是重新应用于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">和find(".selectable")）。

于 2012-12-19T22:38:46.353 回答
0

我有同样的问题，没有一个解决方案对我有用。似乎 selectable 可以应用于 onpageload javascript 执行。mgibsonbr 提供的小提琴对我不起作用。我所做的是一个黑客，这是一个肮脏的。

添加元素后，我只需从缓存中重新加载页面而不接触服务器。

location.reload();

于 2013-03-20T20:11:06.987 回答