Question

I’m having trouble getting post DOM created elements to inherit jquery events.
As I understand it, on() should take care of this – but I can’t get it working for elements created inside my form-sumbit ‘post’ call.
I have also tried: $(“form”).on(“sumbit”,function() {

$(document).ready(function(){

    $('p.dev_summary').on("click",function() {
        $(this).next().toggle();
        }); 

    $("form").submit(function() {
    var dev_text = $('textarea').attr('value');
        $.ajax({
            type: "POST",
            url: "composite/submit_dev",
            data: "dev_text=test",
            success: function(){
                var $content = $('<div class=insert_dev id></div><p class=dev_summary>Some Text</p>');
                $content.insertBefore( $('div.insert_dev');
            }
        });
    return false;
    });
});

Thank you in advance.

HTML/PHP as requested (codeigniter):

<div class="composite_wrapper">
<?php foreach($development as $row): ?>
<div class="insert_dev" id="<?php echo $row['orderid'];?>"></div>
<p class="dev_summary"><?php echo 'Summary: ' .$row['text'];?></p>
<div class="development"><?php echo $row['text']?></div>
<?php endforeach ?>

<?php 
$attributes = array('style' => 'display: none');

?>
<?php echo form_open('#',$attributes); ?>
<?php echo validation_errors(); ?>
<p>
<label for="dev_text">Development:</label>
<br />
<?php echo form_textarea('dev_text'); ?>
</p>

Answer 1

There are 2 implementations of on(). One allows binding directly to elements but those elemnts must exist, and does not account for futures.

The other method is a delegation method. You delegate the handler to a higher level elementt or the document. This method catches the event as it bubbles

 $(document).on('click', 'p.dev_summary', function ......

Look at optional selector in on() docs

http://api.jquery.com/on/