Question

我的功能与<select>类似，但几乎没有变化。一个重要的事情是您可以通过搜索输入字段添加选项。现在我遇到了一个问题，即在附加发生后我无法应用函数。

您可以在此处查看完整功能：http://jsfiddle.net/527Zm/1/

追加发生在第47行：

$(this).parent().parent().find('.ms-list').append('<div class="multiple-selector-table-row selected"><div class="ms-column">'+inputvalue+'</div></div>');

为了理解我想说的内容，在字段中输入3个以上的字符（例如：Hello）并按Enter键。之后 - 选择其他选项，然后尝试选择您在列表中输入的内容。

那么有没有办法重新加载功能才能使这个工作？我只是不确定如何处理它。

Answer 1

这个问题是因为你添加动态数据而发生的，这些数据是在加载文档后添加的，所以要解决这个问题，将选择器的表单默认改为$(document).find()...

你可以为所有活动做到这一点......

function mselector(e, search, enterable) {          
    if (search == 'create') {e.find('.multiple-selector-table .ms-search-label').css('display','block');} //check search option
    if (search == 'remove') {e.find('.multiple-selector-table .ms-search-label').css('display','none');} //check search option
    e.find('.multiple-selector-table-row-no-result').hide();    //hide alert at start   
    var mainselector = e.find('.multiple-selector .ms-column-w:first-child');
    var tablewidth   = parseInt(e.find('.multiple-selector-table').css("width"));   

    e.each(function(){
        var issolo   = $(this).find('.multiple-selector .ms-column-w').length;
        if (issolo == 1) {  
        $(this).addClass('solo-select');
        var swidth   = parseInt($(this).find('.multiple-selector').css("width"));
        $(this).find('.multiple-selector-table').css("width",swidth-2);
        tablewidth = swidth;
        }
    });

    e.find('.multiple-selector-table-row').each(function(){ //find value at init and highlight it
        var secondselector = $(this).find('.ms-column:first-child');
        var firstselector  = $(this).parent().parent().parent().find('.multiple-selector .ms-column-w:first-child');
        if(firstselector.text() == secondselector.text())
        {
            $(this).addClass('selected');
        }
    });

    e.find('.multiple-selector-table .ms-search-label .ms-search').on("keyup", function() { //func on keyup
        e.find('.multiple-selector-table-row-no-result').hide();
        var value = $(this).val();
        e.find('.multiple-selector-table-row').hide();
        e.find('.ms-column:contains("' + value + '")').parents('.multiple-selector-table-row').show();              
        if(value == '') { 
            e.find('.multiple-selector-table-row').show()
        }           
        if (!e.find('.multiple-selector-table-row').is(":visible")) {
            var mainvalue = $(this).parent().parent().parent().find('.multiple-selector .ms-column-w:first-child');
            var inputvalue = $(this).val();     
            e.find('.multiple-selector-table-row-no-result').show();    
            if (inputvalue.length >= 3){
                if(event.keyCode == 13 && enterable == 1){ 
                    mainvalue.text(inputvalue); //transfer value
                    $(this).val(''); //reset input value
                    $(this).parent().parent().parent().find('.multiple-selector-table').hide(); //remove visibility on key press
                    $('.ms-helper').toggleClass('ms-visibility');
                    $(this).parent().parent().parent().find('.multiple-selector-table-row-no-result').hide();
                    $(this).parent().parent().parent().find('.multiple-selector-table-row.selected').removeClass('selected');
                    $(this).parent().parent().find('.ms-list').append('<div class="multiple-selector-table-row selected"><div class="ms-column">'+inputvalue+'</div></div>');
                }
            }   
        }
    });     
    $(document).on('click',".multiple-selector .ms-column-w:first-child", function() {
        e.find('.multiple-selector-table-row-no-result').hide();
        $(this).parent().parent().find('.multiple-selector-table').show() //check visibility
        $(this).parent().parent().find('.multiple-selector-table .ms-search-label .ms-search').val(''); //reset input value
        $(this).parent().parent().find('.multiple-selector-table-row').show() //show all rows
        $('.ms-helper').toggleClass('ms-visibility');
    });     
    $('.ms-helper').on('click', function() {
        $('.ms-helper').toggleClass('ms-visibility');
        e.find('.multiple-selector-table').hide(); //check visibility
        e.find('.multiple-selector-table-row-no-result').hide();
    });     
    $(document).on('click','.multiple-selector-table-row', function() {
        $(this).parent().find('.multiple-selector-table-row.selected').removeClass('selected');
        $(this).addClass('selected');
        var cycler = -1;        
        $(this).find('.ms-column').each(function(){
            var curtext = $(this).text();
            cycler +=1;
            $(this).parent().parent().parent().parent().find('.multiple-selector .ms-column-w:eq('+cycler+')').text(curtext);               
        });
        e.find('.multiple-selector-table').hide(); //check visibility
        $('.ms-helper').toggleClass('ms-visibility');
        e.find('.multiple-selector-table-row-no-result').hide();
    });
};

mselector（$（＆＃39;。多选择器-wrapper.search输入＆＃39;），＆＃34;创建＆＃34;，1）;

Answer 2

您必须再次分配 新创建的元素的onclick事件。因此，我将append()中的代码放入newItem变量（第47 - 51行），然后分配相同的onclick函数。我创建了一个由multipleSelectorTableRowClick方法调用的新函数call()。它允许将context (read more here)设置为此。（第68-86行）。

以下是您编辑的代码：http://jsfiddle.net/T6qPk/

Answer 3

选中 Working Fiddle 。

mselector($('.multiple-selector-wrapper.search-enter'),"create",1);

在第47行之后添加上述行。

您正在使用类.multiple-selector-wrapper.search-enter附加新元素。

因此，您需要显式绑定此元素上的所有现有事件（发生追加后）。

在自己的函数中使用append（） - 脚本不起作用

3 个答案: