Question

Hey so i have this code :

$('#album_cell' + currentCell).toggle(
    function() {
        $('#album_cell'+currentCell).flip({
            direction:  'lr',
            color:      "#FFF",
            content:    '<?php echo form_open('subjects/insert_caption');?>'
                      + '<textarea id="caption_input' + currentCell + '">'
                      + '   <?php echo $this->lang->line('insert_catpion_text'); ?>'
                      + '</textarea>'
                      + '<input type="submit" id="submit_caption' + currentCell + '" value="<?php echo $this->lang->line('save'); ?>" /> '
                      + '<?php echo form_close(); ?>'
                      + ''
        });
    },
    function() {
        $('#album_cell'+currentCell).revertFlip();
    }
);

I’m using CodeIgniter & jQuery Flip plugin, which is unrelated but explains the unknown code to some of you.

Now all of the data is correct and the plugin creates some content after the first click and reverets to the original as expected.

Now my question is how can i bind an event on the created content so a click on the inner textarea/button dosen’t fire the toggle method?

EDIT:

As requested, this is the outputed HTML:

<form action="http://localhost/ci/index.php/subjects/insert_caption" method="post" accept-charset="utf-8">
    <textarea id="caption_input1">add</textarea>
    <input type="submit" id="submit_caption1" value="save">
</form>

I’ve tried :

                    $('#album_cell'+currentCell).on(
'click','#caption_input'+currentCell,function() {
                     alert();
                     e.stopPropagation();
                    });

But that didn’t work, it does fire the event but still toggles.

Answer 1

You must add a selector to your .on() function to bind event to the dynamic created elements.

Try something like (where body is too permisive, use your the container of your loaded data):

$('body').on('click','#caption_input'+currentCell,function(e) {
    e.stopPropagation();
});