Question

我正在尝试将jquery-ui selectable添加到从jquery .post（）返回的数据中。似乎没有识别出来自帖子的数据中创建的选择器。我在想我可以使用.live（），但我不确定。

这是我正在使用的代码：

$.post('middleman.php', { request:"getfeedbacknav"}, function(data) {
       $('#feedbacknav').html(data);
});
$( "#selectable" ).selectable();

以下是我尝试选择的数据：

<div id="feedbacknav" width="20%">
<h3>Feedback</h3>
<br>
<ol id="selectable" width="100%">
    <li class="ui-widget-content">
        <div width="8%"><img src="image/faces/sad_face_3.png" width="25px" height="25px">
        </div>
        <div width="88%" style="padding-top:8px;" id="fb_5678908'">
            intial feedback
        </div>
    </li>
    <li class="ui-widget-content">
        <div width="8%"><img src="image/faces/happy_face_3.png" width="25px" height="25px">
        </div>
        <div width="88%" style="padding-top:8px;" id="fb_1328896423'">
            Server : Bryan
            Comments : Ok
        </div>
    </li>
    <li class="ui-widget-content">
        <div width="8%"><img src="image/faces/happy_face_2.png" width="25px" height="25px">
        </div>
        <div width="88%" style="padding-top:8px;" id="fb_1328898803'">
            Server : Russ
            Comments : He was nice
        </div>
    </li>
</ol>

当我在Chrome中进行检查时，ol会显示，但在查看页面来源时却没有显示。我也没有收到任何错误。

Answer 1

在返回服务器的HTML并在浏览器中呈现之后，您必须调用.selectable。你现在拥有它的方式，它会在Post之后立即调用，而Post的结果还没有，所以$（“＃select）”是空的。

$.post('middleman.php', { request:"getfeedbacknav"}, function(data) {
    $('#feedbacknav').html(data);
    $( "#selectable" ).selectable();
});

Answer 2

您应该在$ .post方法的回调中初始化selectable，否则它会在内容实际添加到DOM之前运行：

$.post('middleman.php', { request:"getfeedbacknav"}, function(data) {
       $('#feedbacknav').html(data);
       $( "#selectable" ).selectable();
});

Answer 3

由于JavaScript，新创建的ol未在页面源中显示动态添加它们，ViewSource仅显示静态元素。 JavaScript没有实际编写新元素静态源而是将它们添加到DOM（文档对象模型）。它在客户端创建它们或者可以虚拟地说。
您也可以使用live()或事件委派方法。这个page有很好的教程。

如何从jquery .post（）添加selectable到数据返回

3 个答案: