CodeIgniter Forums
[Solved] Codeigniter JQUERY - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: [Solved] Codeigniter JQUERY (/showthread.php?tid=66672)

[Solved] Codeigniter JQUERY - wolfgang1983 - 11-19-2016

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

RE: Codeigniter JQUERY - Wouter60 - 11-20-2016

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


RE: Codeigniter JQUERY - wolfgang1983 - 11-20-2016

(11-20-2016, 12:51 AM)Wouter60 Wrote: 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.

RE: Codeigniter JQUERY - Paradinight - 11-20-2016

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


RE: Codeigniter JQUERY - wolfgang1983 - 11-20-2016

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>