淡入appendTo与ui.item.value [英] fadeIn appendTo with ui.item.value

问题描述

我使用jQueryUI的的自动完成构件检索从MySQL数据库主题名称。当用户选择从自动完成列表中选择一个主题，我想追加一条受#subjects_container，具有淡入显示它。我的问题似乎与语法，虽然我一直没能看到我的错误。

I'm using jQueryUI's autocomplete widget to retrieve subject names from a MySQL database. When the user selects a subject from the autocomplete list, I want to append that subject to #subjects_container, displaying it with fadeIn. My problem seems to be with syntax, although I haven't been able to see my error.

ui.item.value确实包含了我要追加什么

ui.item.value indeed contains what I want to append

函数检索值：

function autocompletejq() {
$( "#autocomplete" ).autocomplete({
    source: "autocomplete.php",
    minLength: 1,
    delay: 0, 
    select: function(event, ui) {
        alert(ui.item.value);
        $( "<input class=\"added_chkboxes\" type=\"checkbox\" checked=\"checked\" />" + ui.item.value + "").appendTo( "#subjects_container" );
    }
});

}

要我失望的是，只有复选框被追加！也许我的拼接是错误的。

To my dismay, only the checkbox is appended! Perhaps my concatenation is wrong.

注：hide（）和淡入（）这里没有显示

Note: hide() and fadeIn() aren't shown here.

最终解决方案

裹ui.item.value HTML标签，在这里＆LT;跨度＆GT; 标签：

Wrap ui.item.value in html tags, here <span> tags:

function autocompletejq() {
$( "#autocomplete" ).autocomplete({
    source: "autocomplete.php",
    minLength: 1,
    delay: 0, 
    select: function(event, ui) {
        alert(ui.item.value);
        $( "<input class=\"added_chkboxes\" type=\"checkbox\" checked=\"checked\" /><span>" + ui.item.value + "</span>" ).appendTo( "#subjects_container" ).hide().fadeIn();
    }
});

}

推荐答案

关于效果的一部分：

$("<p>My new Content</p>").appendTo("#myWrapper").hide().fadeIn();

关于创建对象：
我想，你需要用HTML标记，例如内你的ui.item.value跨度。

Regarding object creation: I think you need to wrap your "ui.item.value" inside an html tag, e.g. a span.

所有的一切我会试着做某事。像这样的：

All in all I would try sth. like this:

var newHTML = '<input class="added_chkboxes" type="checkbox" checked="checked" />' +      
    '<span>ui.item.value</span>';
$(newHTML).appendTo("#subjects_containe").hide().fadeIn();

下面是一个虚拟的例子： http://jsfiddle.net/SunnyRed/dB2uT/

Here is a dummy example: http://jsfiddle.net/SunnyRed/dB2uT/

希望这有助于。

这篇关于淡入appendTo与ui.item.value的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！