добавление строки поиска через JavaScript

Question

У меня есть рабочая панель поиска, которая добавляется через html. Однако, чтобы сделать код ненавязчивым, я пытаюсь добавить панель поиска и кнопку с помощью JavaScript. Я могу отобразить панель поиска и кнопку, но функциональность воссоздания результатов перестала работать.

Вот раздел для добавления строки поиска в JS.

var $searchSection = $('<div class="student-search"></div>'); 
$searchSection.append('<input id = "search-criteria" placeholder="Search for students..."></input>'); 
$searchSection.append('<button>Search</button>'); 

//Append search section 
$('.page-header').append($searchSection); 

Я пытаюсь получить функциональность поиска. Вот ссылка на код с поиском, который работает, поскольку панель поиска включена в html. http://codepen.io/fun/pen/RRyaNm

Это ссылка на код со строкой поиска, добавленной через js, но без функции поиска. http://codepen.io/fun/pen/VjraNd?editors=1010

Как вы получаете поиск для работы с добавлением из js?

Любая помощь или указатели были бы замечательными.

Спасибо,

Гарри

Answer 1

Вам не нужно добавлять дополнительные функции, просто переместите коды вверх. Проверить этот jsfiddle https://jsfiddle.net/xt5193z1/

//Search section 

var $searchSection = $('<div class="student-search"></div>'); 
$searchSection.append('<input id = "search-criteria" placeholder="Search for students..."></input>'); 
$searchSection.append('<button>Search</button>'); 

//Append search section 
$('.page-header').append($searchSection); 


var $studentItem = $('.student-item'); 
var $pagination = $('.pagination'); 
var $searchCriteria = $('#search-criteria'); 
var perPage = 10; 


// count number of student items 
var studentCount = $studentItem.length; 
// number of pages = number of students/10 rounded up 
var pageNumber = Math.ceil(studentCount/perPage); 
// remove all student items 
var initialTen = $studentItem.hide(); 
// display first 10 student items 
initialTen = $studentItem.slice(0, perPage).show(); 
// pagination ul 
var paginationHTML = '<ul>'; 
// calc number of links 
for (var i = 1; i < pageNumber + 1; i++) { 
    // li and link for each page 
    paginationHTML += '<li><a href ="#">' + i + '</a></li>'; 
} 
// end of ul 
paginationHTML += '</ul>'; 
// display list to page 
$pagination.html(paginationHTML); 
// pagination link click 
$('.pagination li a').on('click', function() { 
    // remove active 
    $('.pagination li a.active').removeClass('active'); 
    // add active class 
    $(this).addClass('active'); 
    // page number of clicked 
    var pageNum = this.text; 
    // Start point for slice 
    // e.g 3 * 10 
    var startFrom = pageNum * perPage - perPage; 
    // end point for slice 
    // e.g 30 + 10 
    var endOn = startFrom + perPage; 
    // display students based on number clicked 
    $studentItem.hide().slice(startFrom, endOn).show(); 

}); 





// Error message for no matches found 
var $noMatches = $('<h2>No matches found please try again</h2>'); 
// Add to page 
$('.page').append($noMatches); 
// hide initially 
$noMatches.hide(); 

// search box on type 
$searchCriteria.on('input', function() { 
    // remove all result classes 
    $studentItem.each(function() { 
    $(this).removeClass("result"); 
    }); 

    // value of searched 
    var text = $(this).val().toLowerCase(); 
    // results of search 
    var results = $("ul.student-list li:contains('" + text.toLowerCase() + "')"); 
    results.addClass("result"); 
    // show or hide based on result matching div 
    $studentItem.each(function() { 
    if ($(this).hasClass('result')) { 
     $(this).show("slow"); 
    } else { 
     $(this).hide(); 

    } 

    }); 

    if (results.length > 10) { 

    // remove all student items 
    var initialTen = $studentItem.hide(); 
    // display first 10 student items 
    initialTen = $studentItem.slice(0, perPage).show(); 
    // show pagination 
    $('.pagination').show(); 
    // hide no matches message 
    $noMatches.hide(); 
    } else if (results.length === 0) { 
    $pagination.hide(); 
    $noMatches.show(); 

    } else { 
    $pagination.hide(); 
    } 

}); 

Answer 2

Как сказал Siguza, $('#search-criteria') не существует в то время, вы Fetching его. Таким образом, функция on является хорошей идеей, но это следует так:

$('.page-header').on('input', '#search-criteria', function() { 
    //your code 
}); 

Что она делает это, она будет связывать функцию к элементу, который добавляется динамически в DOM

Вот jsFiidle

Он будет работать на вас. :)