Select2 Programmatic Access

Question

Я использую jQuery Select2, и я столкнулся с проблемой, задающей значение и инициирующим событие.

У меня есть простой выпадающий список select2, подключенный к источнику Ajax. Это прекрасно работает.

Я также событие ждет варианта ВЫБ.2 быть выбран:

// On project select, we add the projects to the list along with the parties 
$('.projSearch').on("select2-selecting", function(e) { 

    // Set the value of the project 
    var projectID = e.val, 
     table = ''; 

     alert(projectID); 
     console.log(e); 

     ... 

При использовании ВЫБ.2 ниспадающего меню, как нормальные, это событие работает отлично. Он определяет данные выбранного вами параметра.

Однако, я также включаю кнопку на странице, которая позволяет пользователю задавать данные поля. Он точно устанавливает данные, но никогда не вызывает событие select2-selecting.

Я пробовал передавать данные вместе с событием, но неважно, когда при запуске события select2-selecting он возвращает undefined.

$(document).on("click", "[name=addProject]", function() { 

    // Set the vars 
    var projectName = $(this).attr('projectname'), 
     projectID = $(this).attr('projectid'), 
     projectNameLong = projectName + ' ('+projectID+')'; 

    // Add the project to the list 
    $("[name=projects]").select2("data", [{id: projectID, text: projectNameLong}]).trigger("select2-selecting", {val: projectID, data: {id: projectID, text: projectNameLong}}); 

}); 

Как передать данные вместе с триггером, чтобы я мог получить к нему доступ в рамках мероприятия?

Спасибо за любую информацию!

Answer 1

Select2 normally triggers the select2-selecting event по creating a $.Event object с пользовательскими данными, содержащими соответствующие атрибуты и data. The second parameter of .trigger позволит вам получать дополнительные данные непосредственно из обработчика событий, но не привязывает его к объекту события.

$(document).on("click", "[name=addProject]", function() { 
    // Set the vars 
    var projectName = $(this).attr('projectname'), 
     projectID = $(this).attr('projectid'), 
     projectNameLong = projectName + ' ('+projectID+')'; 

    // Create the data object 
    var data = { 
     id: projectID, 
     text: projectNameLong 
    }; 

    // Create the custom event object 
    var evt = $.Event("select2-selecting", { 
     val: data.id, 
     data: data 
    }); 

    // Add the project to the list 
    $("[name=projects]") 
     .select2("data", [data]) 
     .trigger(evt); 
}); 

Это должно повторить исходный select2-selecting событие для вас и позволит вам повторно использовать обработчик событий.