Question

I have a hyperlink outputted by jQuery using append such as this:

$('#content').append('<div id="appenddocumentationcontent">'+documentation_contentvalue + " <a title='Click to Edit' id='edit_content'>[Edit]</a></div>");

The generated HTML is this:

<div id="content">
  <div id="appenddocumentationcontent">The quick brown fox jumps over the lazy dog <a id="edit_content" title="Click to Edit">[Edit]</a>
  </div>
</div>

I have a click event using jQuery that will show a text area if clicked and it works fine if the edit hyperlink is clicked for the first time (take note the selector is matched to the hyperlink):

    $('#content #edit_content').click(function() {  

          //Show textarea
    $('#textarea_documentation_content').show();    

      //Show OK button to close again this textbox

    $('#documentation_button_content').show();


      //Hide edit link
    $('#documentation_edit_content').hide();

      //Hide the current content div
    $('#documentation_content').hide();     


});

Finally I have this another click event function for OK button to close the textarea, remove the original values, show the new value and show the edit link again:

    $('#OK_button').click(function() {  
            //remove original content
    $('#appenddocumentationcontent').remove();

            //hide the text area
            $('#textarea_documentation_content').hide();


            //hide the OK button
            $('#documentation_button_content').hide();

            //show again the content div
    $('#documentation_content').show();


           //Show again the edit link
    $('#documentation_edit_content').show();

            //retrieve the new text area value
    var documentation_contentvaluex= $('textarea#textareainput_documentation_content').val();

            //finally append this new value
    $('#content').append('<div id="appenddocumentationcontent">'+documentation_contentvaluex + " <a title='Click to Edit' id='edit_content'>[Edit]</a></div>");

}); 

It works near perfectly except the main problem is that the Edit link is not anymore working after pressing the OK button.

Also the generated HTML before and after pressing OK button is very similar, take a look below:

BEFORE CLICKING OK:

<div id="content">
  <div id="appenddocumentationcontent">The quick brown fox jumps over the lazy dog <a id="edit_content" title="Click to Edit">[Edit]</a>
  </div> 
</div>

AFTER CLICKING OK (with new content replaced):

<div id="content" style="display: block;">
  <div id="appenddocumentationcontent">This is the new content! <a id="edit_content" title="Click to Edit">[Edit]</a>
 </div>
</div>

As you can see, the selectors are not changed at all, it should trigger the edit link again using these selectors in the click function:

$('#content #edit_content').click(function() {  

Am I missing something? thank you so much for your tips.

Answer 1

If you are adding and removing elements, use .on() instead.

$('#content').on('click', '#edit_content', function() { ... });

EDIT: per comment, .live() has been deprecated in favor of .on()

EDIT 2: proper delegation