Sanction Sanction - 4 months ago 19
jQuery Question

Initialise an element with a function dynamically - jQuery

I'm currently using react router to build my site, but I have

s on several pages which I initialise using

How can I keep initialising my dropdowns on every page I visit using react router? The
doesn't seem to register the URL changing.

This is what my dropdown function looks like.


$(function() {
$(window).on('hashchange', function(e){

dropdown: function(o){
var o = $.extend({ maxHeight: 600, buffer: 100, delay: 500 }, o);

return this.each(function(){
var dropdown = $(this),
toggle = dropdown.find('.toggle'),
menu = dropdown.find('.menu'),
a = dropdown.find('a'),
liheight = dropdown.height();
if(!dropdown.length){ return; }{
if(!':visible')) {

$(document).bind('click', function(e){
if (! $('dropdown'))

I have also tried this, but still no luck:

$('body').on('focus', '.dropdown' function(e){

Edit: The solution

Used the
function in react router to initialise the dropdown every time the dropdown was rendered. This is what I added:

export const elDropdown = React.createClass({
componentDidMount: function() {
$(document).ready(function() {
render() {


you need to initialise the dropdowns after they become available on the page. The right place to do that is in React's lifecycle methods. In that case, componentDidMount -

You can create a component that wraps the dropdown and initialises it. Here is a simple example of how you could achieve that:

class DropdownWrapper extends React.Component {
    super() = 'someUniqueID'
    $('#' +;
    return <select id={} otherProps={this.otherProps} ></select>

Notice that you will need to use unique identifiers. You can pass it to the component manually or create it randomly.