0

Задача такая: при выборе из select значения select должен превратиться в label с текстом из select и рядом кнопка "Изменить". Если нажать на "Изменить" label и кнопка опять превращаются в select. Первое превращение работает, а по кнопке нет. Что я делаю неправильно?

HTML:

<select id="select_customer" data-placeholder="Покупатель" tabindex="2">
        <option value=""></option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Afghanistan">Afghanistan</option>
    </select>

JS:

$("#select_customer").change(function (){
    var sp = $("#select_customer :selected").text();            
    var $span = $('<h3><span class="label label-primary">' + sp +'</span><button id="choose_customer" type="button" class="btn btn-default">  Изменить</button></h3>')

$("#select_customer").select2('destroy').replaceWith($span);             
});     


$("#choose_customer").click(function(){
   $span.replaceWith($("#select_customer").select2());      
    })

;

2 ответа 2

1

Проблема в том, что событие $("#choose_customer").click() присваивается при создании страницы, когда объекта $("#choose_customer") еще не существует. Он появляется позже, но событие к нему уже не привязано.

Предлагаю сменить "позывные" кнопки, а также привязку события...

var $span = $('<h3><span class="label label-primary">' + sp +'</span><button type="button" class="choose_customer btn btn-default">  Изменить</button></h3>')

а событие привязать не к кнопке, а к документу.

$("body .choose_customer").click(function(){
   $span.replaceWith($("#select_customer").select2());
});

Из-за компоненты select2() проверить точность ответа не могу, но, думаю, общее направление решения указал :)

1
  • ваш ответ не работает, но напраление вы действительно указали. спасибо!
    – Kley
    26 сен 2015 в 18:36
0

Select2() тут роли не играет. его можно выкинуть. Я сделала так: 1. после загрузки документа запомнила select в переменную

$(document).ready(function(){
var cust=$('#select_customer');

при изменении select создается метка и кнопка, селект ими заменяется, а на кнопку вешается событие методом on по которому должно обратно все замениться select (моей переменной cust).

$("#select_customer").change(function (){
    var sp = $("#select_customer :selected").text();
    var $span = $('<h3><span class="label label-primary">' + sp +'</span>     <button id="choose_customer" type="button" class="btn btn-default btn-sm"> Изменить</button></h3>')
   cust.replaceWith($span);
   $("#choose_customer").on('click',function(){
       $span.replaceWith(cust);
       cust.on('change');//к селекту привязываю событие
       });
   });

т.к. select заново создан событие change не приязано к нему. Я пытаюсь его привязать. но оно не привязывается. Метка заменяется обратно select, но при его изменении уже ничего не происходит

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.