Question

我正在尝试动态创建所谓的portlet列表。可以通过单击按钮添加Portlet，该按钮打开包含3个输入字段的对话框，然后确认并在页面上显示新的portlet。这些portlet有一个减号图标，可用于切换portlet的文本部分。这适用于在页面加载时通过html添加的portlet，但动态添加的portlet似乎没有“绑定到它们”的此功能。

所以我想知道如何将这个功能添加到动态添加的portlet中。我也意识到我的jQuery代码看起来并不是最优的，但我主要是复制粘贴的东西，因为我是新手。

编辑：我应该添加以下链接：http://jqueryui.com/sortable/#portlets - 这是我从中获取大部分代码的地方，您可以测试减号图标功能。

jQuery的：

$(function() {
            var title = $( "#title" ),
            content = $( "#content" ), column = $( "#column" ); 

            $( "#dialog-form" ).dialog({
                autoOpen: false,
                height: 300,
                width: 350,
                modal: true,
                buttons: {
                    "Add content": function() {                            
                        if(column.val()=='col1'){
                            $( "#col1" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
                                '<div class="portlet-header ui-widget-header ui-corner-all">' +
                                '<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
                                '<div class="portlet-content">' + content.val() + '</div></div>'))
                            $( this ).dialog( "close" );
                        }
                        else if(column.val()=='col2'){
                            $( "#col2" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
                                '<div class="portlet-header ui-widget-header ui-corner-all">' +
                                '<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
                                '<div class="portlet-content">' + content.val() + '</div></div>'))
                            $( this ).dialog( "close" );
                        }
                        else if(column.val()=='col3'){
                            $( "#col3" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
                                '<div class="portlet-header ui-widget-header ui-corner-all">' +
                                '<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
                                '<div class="portlet-content">' + content.val() + '</div></div>'))
                            $( this ).dialog( "close" );                                
                        }
                        else if(column.val()=='col4'){
                            $( "#col4" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
                                '<div class="portlet-header ui-widget-header ui-corner-all">' +
                                '<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
                                '<div class="portlet-content">' + content.val() + '</div></div>'))
                            $( this ).dialog( "close" );                                
                        }                            
                        else{
                            $( "#tempcol" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
                                '<div class="portlet-header ui-widget-header ui-corner-all">' +
                                '<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
                                '<div class="portlet-content">' + content.val() + '</div></div>'))
                            $( this ).dialog( "close" );                                
                        } 
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                },
                close: function() {
                }
            });

            $( "#add-content" )
            .button()
            .click(function() {
                $( "#dialog-form" ).dialog( "open" );
            });

            $( ".column" ).sortable({
                connectWith: ".column"
            });

            $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
            .find( ".portlet-header" )
            .addClass( "ui-widget-header ui-corner-all" )
            .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
            .end()
            .find( ".portlet-content" );

            $( ".portlet-header .ui-icon" ).click(function() {
                $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
                $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
            });

            $( ".column" ).disableSelection();
        });

HTML：

<body>

    <div id="centered">

        <div id="inset">
            <h1>title</h1>
            <div id="linear" style="padding: 20px"></div>
        </div>

        <div id="dialog-form" title="Create portlet">

            <form>
                <fieldset>
                    <label for="title">Title</label>
                    <input type="text" name="title" id="title" class="text ui-widget-content ui-corner-all" />
                    <label for="content">Content</label>
                    <input type="text" name="content" id="content" value="" class="text ui-widget-content ui-corner-all" />
                    <label for="column">Column</label>
                    <select name="column" id="column" class="ui-spinner-down ui-widget-content ui-corner-all">
                        <option value="col1">left sidebar</option>
                        <option value="col2">main</option>
                        <option value="col3">bottom left</option>
                        <option value="col4">bottom right</option>
                    </select>
                    <!--<input type="text" name="column" id="column" value="" class="text ui-widget-content ui-corner-all" />-->
                </fieldset>
            </form>
        </div>

        <button id="add-content" >Add Content</button>
        <button id="test" onclick="test()">test</button>
        <div id="preview">
            <table>
                <tbody>
                    <tr>
                        <!--sidebar-->
                        <td>
                            <div id="col1" class="column">
                            </div>
                        </td>
                        <!--sidebar end-->   
                        <td>
                            <table>
                                <tbody>
                                    <!--main-->
                                    <tr>
                                        <div id="col2" class="column">
                                            <div class="portlet">
                                                <div class="portlet-header">News</div>
                                                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
                                            </div>
                                        </div>
                                    </tr>             
                                    <!--main end-->
                                    <!--bottom colums-->
                                    <tr>
                                        <td style="border-left: 0px; border-bottom: 0px">
                                            <div id="col3" class="column">
                                            </div>
                                        </td>
                                        <td style="border-right: 0px; border-bottom: 0px">
                                            <div id="col4" class="column">
                                            </div>
                                        </td>
                                    </tr>                                    
                                    <!--bottom colums end-->
                                </tbody>
                            </table>
                        </td>           
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>

Answer 1

尝试使用动态元素

$("#centered").on('click', ".portlet-header .ui-icon", function(){...});

而不是

$( ".portlet-header .ui-icon" ).click(function(){...});

如何使动态创建的内容在jQuery中保持其功能？

1 个答案: