CODEWITHSUNDEEP
jquery
Praveen
Praveen

Reputation: 2419

How to add submit event to dynamically generated form?

Here is the PHP code that generates the form: form.php 

 <?php
    echo '
    <form action="/wall/comment.php" method="post" id="submit-comment-form" name="'.$postid.'"> 
    <div class="write-comment-profile-pic">
    <img src= "'.$myprofilepic.'" width="30" height="30""/>
    </div>
    <div class="write-comment-textbox-wrap">
    <input type="text" class="textbox4" id="write-comment-textbox" value="Write a comment..." name="comment" style="width:65%;" />
    </div>
   </form>
   ';
   ?>

Jquery code which gets the form.php

$('#images img').click(function() { 
$.get('form.php', function(data) {
$('#image-pop-up').html(data);
});
});

AND here is the jquery code to needs to submit the form:

$('#image-pop-up').on('submit', '#submit-comment-form', function() { 
evt.preventDefault();       
});

in index.html image-pop-up div is an empty one just

<div id="image-pop-up">

</div>

this isn't working... what's wrong? how to fix it?

Upvotes: 0

Views: 5200

Answers (1)

Barney
Barney

Reputation: 16456

I suspect the problem is to do with selectors, and the targeted elements either not being found, or being the right elements to target.

A few things that could be wrong:

  1. Double ID references is unnecessary: it's just another potential place to go wrong.
  2. If #image-pop-up hasn't been generated when this code is executed, the event will never be bound.
  3. The submit event only fires on forms, so you need to make sure that's what you're targeting.
  4. You call preventDefault() of evt, but evt hasn't bound to the events argument.

Presuming that #submit-comment-form is the form you're dealing with, the following code should work regardless of whether any of the elements are available when it executes:

$(document).on('submit', '#submit-comment-form', function(evt){
    evt.preventDefault();
})

Upvotes: 11

Related Questions