Dynamically enable a jquery ui button that was previously disabled on javascript event

Question

I have two divs. Clicking on a jqueryui button (button1) in first div (div1) creates a jquery ui button (button2) in the second div (div2) with a data element identifying the button1 that created it; also the click hides (or disable works too) the clicked button (button1).

When i click on button2, i want to show/enable button1; however, this does not work. This seems to be a problem only with dynamically hidden/disabled buttons.

<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');
  });
});

Here is a fiddle containing the simplified version of the code - https://jsfiddle.net/x7u1xLg8/16/

What is wrong inside the jsfiddle? – Andrei Cioara Mar 23 '18 at 01:18 — Andrei Cioara, Mar 23 '18 at 01:18

score 0 · Answer 1 · answered Mar 23 '18 at 01:19

0

Possibly your HTML is not correct. For instance, you forget to close the double quotes. That will fail silently and have weird consequences.

<div id="pane1>

answered Mar 23 '18 at 01:19

Andrei Cioara

3,404
5
34
62

Thanks for the pointer. The actual code is different/more elaborate and i accidentally made the mistake here, but i guess a similar markup issue could be causing the problem – Bob76 Mar 23 '18 at 01:28
If you can reproduce the problem, I can definitely help. Otherwise I don't think anyone can, sorry. – Andrei Cioara Mar 23 '18 at 01:31

score 0 · Answer 2 · answered Mar 23 '18 at 01:43

You have missed "" in two place:

<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>

Please check the updated code(Note check the code in fiddle).

$(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>

Dynamically enable a jquery ui button that was previously disabled on javascript event

2 Answers2