Using append() in own function - scripts is not working after

Question

I've got function which works similar to <select> but with few changes. One and important thing is that you can add options in select through search input field. Now I'm stuck into problem that I can't apply functions after append occurs.

You can check full functionality here: http://jsfiddle.net/527Zm/1/

Appending occurs on line 47:

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

In order to understand what I'm trying to say, enter more than 3 characters (example: Hello) into field and hit Enter. After that - choose other option and after that try to choose what you've entered in list.

So is there any ways to reload function in order to make this work? I'm just not sure how I can handle that.

Answer 1

Check this Working Fiddle.

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

Add the above line after line-47.

• You are appending a new element with class .multiple-selector-wrapper.search-enter.
• So, you need to explicitly bind all the existing events on this elements (after append occurs).

Answer 2

This problem was happens since you are add a dynamic data, these data was add after load a document, so to solve this problem change selector form default to $(document).find()...

you can do it for all event ...

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($('.multiple-selector-wrapper.search-enter'),"create",1);

Answer 3

You have to assign the onclick event for the new created element again. So I put the code in your append() into newItem variable (lines 47 - 51) and then assigned the same onclick function. I created a new function multipleSelectorTableRowClick which is called by call() method. It allows to set context (read more here) to this. (lines 68 - 86).

Here is the your edited code: http://jsfiddle.net/T6qPk/