0

My issue: click handlers are not working after I redraw the HTML elements that activate these handlers.

I have a parent div with a list of child divs that are sortable via jquery's .sortable() method. These divs have a variety of click handlers that cause various actions to happen.

jsfiddle: http://jsfiddle.net/GA4Qs/805/

First I collect all the html in the parent div 

var original_order = $('#sortable_groups').html()

and then on cancel, restore the HTML to it's original state

$('#cancel').click(function() { 
        $('#sortable_groups').empty().html(original_order);
});

The redrawing works exactly like I want it to, but after I cancel and the html is redrawn, the click handlers aren't working.

After digging through SO, I found some outdated posts about 'live' events, which have merged into .on('click') events. I have updated the code to use .on() handlers instead of .click(), sadly this did not solve the problem.

My above fiddle simplifies (but shows) the issue I'm having. If you click the bold text, a sanity alert appears. After hitting 'cancel', the sanity alert triggered via a click no longer appears.

I have a feeling that this issue is likely to do my misunderstanding of some aspects of Jquery, but as everything appears to work well initially and no errors are present in the console, I'm not really sure what to try next.

rob
  • 2,119
  • 1
  • 22
  • 41

1 Answers1

1

use on delegation for dynamic element

$('#sortable_groups').on('click', '.dg_acc_div' , function(e){ 
        window.alert($(this).html())
});

fiddle: http://jsfiddle.net/GA4Qs/807/

bipen
  • 36,319
  • 9
  • 49
  • 62
  • As I suspected, an issue of me misunderstanding jquery. I was attempting to bind the event directly to the clickable div instead of attaching it to the parent first. Excuse my stupid question, thank you very much!! Will accept when timer expires. – rob Aug 25 '16 at 14:35