Динамически активировать кнопку пользовательского интерфейса jquery, которая ранее была отключена для события javascript

У меня есть два деления. Нажатие на кнопку jqueryui (button1) в первом div (div1) создает кнопку пользовательского интерфейса jquery (button2) во втором div (div2) с элементом данных, идентифицирующим button1, которая его создала; также щелчок скрывает (или отключает работает тоже) нажатую кнопку (button1).

Когда я нажимаю на button2, я хочу показать / включить button1; Однако это не работает. Это кажется проблемой только с динамически скрытыми / отключенными кнопками.

<div id="pane1>
    <a id="123" class="addme jqb">Add</a>
</div>
<div id="pane1>
    <a id="345" data-target='123' class="deleteme jqb">Delete</a>
</div>

$(function(){
    $('.jqb').button();
  $('.deleteme').button('disable');
  $('.addme').on("click", function(){
    $(this).button('disable');
    $('.deleteme').button('enable');
  });
  $('.deleteme').on("click", function(){
    $(this).button('disable');
    $('#123').button('enable');
  });
});

Вот скрипка, содержащая упрощенную версию кода - https://jsfiddle.net/x7u1xLg8/16/

2 ответа

Возможно, ваш HTML не верен. Например, вы забыли закрыть двойные кавычки. Это молча провалится и будет иметь странные последствия.

<div id="pane1>

Вы пропустили "" в двух местах:

<div id="pane1>

    <a id="123" class="addme jqb">Add</a>
  </div>

<div id="pane1>

    <a id="345" data-target='123' class="deleteme jqb">Delete</a>
 </div>

Пожалуйста, проверьте обновленный код (обратите внимание, проверьте код в скрипте).

$(function(){
 $('.jqb').button();
  $('.addme').on("click", function(){
   $(this).button('disable');
    $('#345').button('enable');
  });
  $('.deleteme').on("click", function(){
   $(this).button('disable');
    $('#123').button('enable');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id="pane1">
    <a id="123" class="addme jqb">Test</a>
</div>
<div id="pane1">
    <a id="345" data-target='123' class="deleteme jqb">Test1</a>
</div>

Другие вопросы по тегам