Инициализация select2 создана динамически

Question

У меня есть раскрывающийся список select2, для которого я предоставляю функцию сопряжения. Он инициализируется так на начальной загрузке страницы:

jQuery(document).ready(function() { 
    jQuery(".my_select2").select2({ 
     matcher: function(term, text) {...} 
    }); 
}); 

Это работает на начальной загрузке страницы.

Теперь у меня есть дополнительные раскрывающиеся меню (select элементы, созданные динамически (вытянут в с помощью AJAX, то есть jQuery(match).load(url). Эти дополнительные выпадающие списки не получают intialised, как ВЫБ.2 виджетов, что понятно, даже если они соответствуют исходной ВЫБ.2 селектор.

Итак, как я могу сказать jQuery для обработки этих динамически созданных элементов select как select2 элементов, которые необходимо инициализировать? Могу ли я установить какой-то «вахту» на соответствующие элементы, так что инициализация select2 запускается каждый раз на страницу добавлен соответствующий элемент?

Я помню live() b eing, введенный в jQuery некоторое время назад, который поддерживал соответствующие элементы до их создания, если я правильно понял. Я никогда не использовал эту функцию, и теперь она выглядит устаревшей. Но это похоже на то, что я ищу.

Это для плагина WordPress, который в настоящее время использует jQuery v1.11.2.

Answer 1

вы можете попробовать с DOMNodeInserted и искать выбора или класс вы назначая их

Demo

$('body').on('DOMNodeInserted', 'select', function() { 
    $(this).select2(); 
}); 

Update

DOMNodeInserted

Устаревший Эта функция удалена из веб-стандартов. Хотя некоторые браузеры все еще могут его поддерживать, он находится в процессе отбрасывания. Избегайте его использования и, если возможно, обновите существующий код;

Предложенный метод был бы что-то подобное с MutationObserver

$(function() { 
 
    $("button").on("click", function() { 
 
    $("#dynamic-container").append($("<select><option>test</option><select/>")); 
 
    }); 
 

 
    // select the target node 
 
    var target = document.getElementById('dynamic-container'); 
 

 
    if (target) { 
 
    // create an observer instance 
 
    var observer = new MutationObserver(function(mutations) { 
 
     //loop through the detected mutations(added controls) 
 
     mutations.forEach(function(mutation) { 
 
     //addedNodes contains all detected new controls 
 
     if (mutation && mutation.addedNodes) { 
 
      mutation.addedNodes.forEach(function(elm) { 
 
      //only apply select2 to select elements 
 
      if (elm && elm.nodeName === "SELECT") { 
 
       $(elm).select2(); 
 
      } 
 
      }); 
 
     } 
 
     }); 
 
    }); 
 
    
 
    // pass in the target node, as well as the observer options 
 
    observer.observe(target, { 
 
     childList: true 
 
    }); 
 

 
    // later, you can stop observing 
 
    //observer.disconnect(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><link href="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet"/> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> 
 

 

 
<button>Add new select</button> 
 
    <div id="dynamic-container"> 
 

 
    </div>

Answer 2

я наткнулся на подобную ситуацию в последнее время, но сделал это в очень обычным способом:

$(document).ready(function() { 
 

 
//function to initialize select2 
 
    function initializeSelect2(selectElementObj) { 
 
    selectElementObj.select2({ 
 
     width: "80%", 
 
     tags: true 
 
    }); 
 
    } 
 

 

 
//onload: call the above function 
 
    $(".select-to-select2").each(function() { 
 
    initializeSelect2($(this)); 
 
    }); 
 

 
//dynamically added selects 
 

 
    $(".add-new-select").on("click", function() { 
 
    var newSelect = $("<select class='select-to-select2' multiple><option>option 1</option><option>option 2</option></select>"); 
 
    $(".select-container").append(newSelect); 
 
    initializeSelect2(newSelect); 
 
    }); 
 

 

 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script> 
 
<div class="select-container"> 
 
    <select class='select-to-select2' multiple> 
 
    <option value='1'>option1</option> 
 
    <option value='2'>option2</option> 
 
    </select> 
 

 
    <select class='select-to-select2' multiple> 
 
    <option value='1'>option1</option> 
 
    <option value='2'>option2</option> 
 
    </select> 
 

 
</div> 
 
<div> 
 
    <button class="add-new-select">Add New Select</button> 
 
</div>

В случае функции .load найдите все элементы выбора, которые должны быть инициализированы в обратном вызове функции загрузки, и вызовите initializeSelect2 для каждого из этих элементов выбора.

Я надеюсь, что это поможет кому-то, кто ищет простое решение.

Answer 3

Я работал так же, как решение рошана, но не прошел объект select в функции.Это для вывода таблицы из вызова ajax.

$(document).ready(function() { 

     function initSelect2() { 
      $("[id^='DDAlertFreq']").select2({ 
       minimumResultsForSearch: Infinity, 
       allowClear: false, 
       theme: "bootstrap" 
      }); 
     }; 

//define the dropdown and set to variable  
var DDAlertFrequency = '<select id="DDAlertFreq" ><option value="Fifteen_Minutes">15 Minutes</option><option value="Thirty_Minutes">30 Minutes</option><option value="Hour">Hour</option><option value="Two_Hours">2 Hours</option><option value="Three_Hours">3 Hours</option><option value="Four_Hours">4 Hours</option><option value="Six_Hours">6 Hours</option><option value="Eight_Hours">8 Hours</option><option value="Twelve_Hours">12 Hours</option><option value="Day">Day</option></select>' 

function RetrieveUserAlerts(uid) { 
       $.ajax({ 
        url: 'SavedSearches.asmx/LoadUserAlerts', 
        dataType: 'json', 
        method: 'post', 
        data: { userid: uid }, 
        success: function (data) { 
         var tbl = $("#tblAlerts > tbody"); 
         tbl.empty(); 
         $.each(data, function() { 
          userAlert.alert_idx = this['alert_idx']; 
          userAlert.Name = this['Name']; 
          userAlert.price_alert_low = this['price_alert_low']; 
          userAlert.alert_frequency = this['alert_frequency']; 
          userAlert.alert_max_per_day = this['alert_max_per_day']; 
          userAlert.alert_to_email = this['alert_to_email']; 
          userAlert.alert_to_sms = this['alert_to_sms']; 
          userAlert.active = this['active']; 
          userAlert.alert_start_date = moment(this['alert_start_date']).format("MM/DD/YY"); 
          userAlert.alert_end_date = moment(this['alert_end_date']).format("MM/DD/YY"); 
          userAlert.OpenSectionID = this['OpenSectionID']; 
// modify the dropdown to assign unique id and match selection 
          var selectAlert = DDAlertFrequency.replace("DDAlertFreq", "DDAlertFreq_" + userAlert.alert_idx).replace('"' + userAlert.alert_frequency + '"', '"' + userAlert.alert_frequency + '" selected'); 
          var tblRow = '<tr><td>' 
           + userAlert.Name 
          + '</td><td>' 
          + '<input id="txtPriceAlertLow_' + userAlert.alert_idx + '" type="text" class="form-control" value="' + userAlert.price_alert_low + '"/>' 
          + '</td><td>' 
          + '<input id="chkAlertToEmail_' + userAlert.alert_idx + '" type="checkbox" ' + ((userAlert.alert_to_email == true) ? "checked" : "") + ' />' 
          + '</td><td>' 
          + '<input id="chkAlertToEmail_' + userAlert.alert_idx + '" type="checkbox" ' + ((userAlert.alert_to_sms == true) ? "checked" : "") + ' />' 
          + '</td><td>' 
          + selectAlert //modified Select2 dropdown 
          + '</td><td>' 
          + '<input id="txtMaxPerDay_' + userAlert.alert_idx + '" type="text" class="form-control" value="' + userAlert.alert_max_per_day + '"/>' 
          + '</td><td>' 
          + userAlert.alert_start_date 
          + '</td><td>' 
          + userAlert.alert_end_date 
          + '</td><td>' 
          + '<input id="chkActive_' + userAlert.alert_idx + '" type="checkbox" ' + ((userAlert.active == true) ? "checked" : "") + ' />' 
          + '</td><tr>' 
          tbl.append(tblRow); 
          initSelect2(); //call the function to initialize all Select2 dropdowns created 
         }); 
        }, 
        error: function (err) { 
         console.log('Error (RetrieveUserAlerts): ' + JSON.stringify(err, null, 2)); 
        } 
       }); 
      }; 

Прошу прощения за посторонние вещи - я прокомментировал интересующие вас области. Надеюсь, это поможет другим!