Question

我是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在$("my-div").html(same-data-from-ajax).trigger('create')中加载此数据，那么它就不起作用。

这就是我所拥有的：

带有一个按钮的主要HTML

js with：

$("#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');
}

我做错了吗？

Answer 1

我相信您案例中最简单的解决方案是将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")）。

Answer 2

我遇到了同样的问题，没有一个解决方案适合我。似乎可选择可以应用于页面加载javascript执行。由mgibsonbr提供的小提琴对我不起作用。我做的是一个黑客，它是一个肮脏的。

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

location.reload（）;

jquery selectable不能在动态加载的表上工作

2 个答案: