[Solved] Codeigniter JQUERY

On my codeigniter project, the user can insert a image by url or upload it per normal.

I generate some text using jquery html()

Code:

<script type="text/javascript">
standardhtml = '';
standardhtml += '<div class="" style="display: block;">';
standardhtml += 'You can also provide a ';
standardhtml += '<a class="url_input">link from the web</a>';
standardhtml += '</div>';

$('.hyperlink_text').html(standardhtml);

$(".hyperlink_text a.url_input").click(function(){
    newhtml = '';
    newhtml += 'Link from the web ';
    newhtml += '<input class="form-control input-sm" placeholder="http://example.com/image.png" type="text">';
    newhtml += '<span class="separator"> | </span>';
    newhtml += '<a class="cancel" id="cancel">Cancel</a>';
    $('.hyperlink_text').html(newhtml);
});

// Should be able to detect cancel button above does not?

$("a.cancel").click(function(){
    $('.hyperlink_text').html(standardhtml);
    alert('Yes Works'); // Does not work
});
</script>

When I click on a.url_input link it generates new html in that html it has a cancel a tag in it

When I click on the cancel tag it should re generate the (standardhtml) but does not it is not detecting the a.cancel link

Code:

$('.hyperlink_text').html(standardhtml);

Example Codepen  Demo

Question How can I make sure when I click on cancel button on the newhtml it will regenerate the standardhtml

There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!

That's because the a.cancel class doesn't exit yet when the page is generated, but only later on. In that case, you will have to 'bind' the click function to the new element.
You can try this:

Code:

$( "a.cancel" ).on( "click", function() {
 alert('You clicked on the cancel button');
});

That's because the a.cancel class doesn't exit yet when the page is generated, but only later on. In that case, you will have to 'bind' the click function to the new element.
You can try this:

Code:

$( "a.cancel" ).on( "click", function() {
 alert('You clicked on the cancel button');
});

Not working I tried adding it inside
 

Code:

$(".hyperlink_text a.url_input").click(function(){

This part it work sort of but was un able to click on #url_input again it only let me do it once.

There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!

Code:

$( "#an_item_that_exist_on_start" ).on( "click", "a.url_input", function() {
  console.log( 'hello i am clicked' );
});

Working now 

Code:

<script type="text/javascript">    
standardhtml = '';
standardhtml += 'You can also provide a ';
standardhtml += '<span id="url_text">link from the web</span>';

$('#hyperlink_text').html(standardhtml);

$('#hyperlink_text').on("click", "#url_text", function(){
    newhtml = '';
    newhtml += 'Link from the web ';
    newhtml += '<input class="form-control input-sm" placeholder="http://example.com/image.png" type="text">';
    newhtml += '<span class="separator"> | </span>';
    newhtml += '<span class="cancel" id="cancel">Cancel</span>';
    $('#hyperlink_text').html(newhtml);
});

$("#hyperlink_text").on("click", "#cancel", function() {
    $('#hyperlink_text').html(standardhtml);
});
</script>

There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!