To register an JavaScript event to an HTML element with jQuery, use this syntax:
$('element').event_name(function() {
  // code to execute when "event_name" is triggered
})

For example, the following code displays an alert message when a link with class="cls" is clicked.
<script type="text/javascript"><!--
$(document).ready(function() {
  // when a link with class="cls" is clicked, alert the link text
  $('a.cls').click(function() {
    alert($(this).text())
  });
});
--></script>
<a href="http://coursesweb.net/" title="Free Courses" class="cls">coursesweb.net</a>

But if the link is in a code included via ajax, the script above not work for that link because when the jQuery code that register the event is executed (when the page is loaded), the link included via ajax isn't in the page.
But the solution is simple, so, to register events (click, mouseover, submit, ...) to HTML elements included with ajax, you must execute the code that register the event after the response is received. To do that, just write that jQuery code inside a function, then call that function within jQuery.ready(), and in the ajax function, after the server response is received and added into the page.
- Example (see the comments in code):
<script type="text/javascript"><!--
// set a function to register click event to "a.cls"
function clickAcls() {
  // when a link with class="cls" is clicked, alert the link text
  $('a.cls').click(function() {
    alert($(this).text())
  });
}

$(document).ready(function() {
  clickAcls();       // calls the function to register click event for "a.cls"

  // when the form "#frm" is submited
  $('#frm').submit(function() {
    // here can get form data, and define data_to_send

    // sets the ajax() method, and included the response in a HTML tag with id="resp"
    $.ajax({
      type: 'post',
      data: 'data_to_send',
      url: 'script.php',
      error: function(xhr, status, error) { alert('Error: '+ xhr.status+ ' - '+ error); },
      success: function(response) {
        $('#resp').html(response);

        // calls the function to register click event for "a.cls" added in response
        clickAcls();
      }
    });

    return false;      // required to not open the page when form is submited
  });
});
--></script>

• This method can be applied for all type of events.
Here's another example. Register "submit" event for all forms, to submit form data via ajax to a PHP script, and then to include the response within a tag with id="resp". The "submit" event will be registered inclusively for the forms aded with ajax.
<script type="text/javascript"><!--
// Performs Ajax request
function ajaxSend(file, data_to_send, resp) {
  // define and execute jQuery Ajax
  $.ajax({
    type: 'post',
    url: file,
    data: data_to_send,
    error: function(xhr, status, error) { alert('Error: '+ xhr.status+ ' - '+ error); },     // alert a message in case of error
    success: function(response) {
      resp.html(response);

      // calls submitForm() to register submit event for forms within ajax response
      submitForm();
    }
  });
  return false;
}

// submits form via ajaxSend() function
function submitForm() {
  // when a form is submited
  $('form').submit(function() {
    // here can validate the form, and set data that must be send to server script

    ajaxSend('script.php', 'data_to_send', $('#resp'));        // call to send the Ajax request

    return false;      // necesary to not open the page when form is submited
  });
}

$(document).ready(function() {
  submitForm();       // calls the function to register submit event
});
--></script>
Register Events to elements included with jQuery ajax

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute is used in <img> tag for the address of the image?
href src rel
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which CSS code hides the element on page?
display: none; display: inline; position: relative;
#id {
  display: none;
}
What instruction stops the execution of a while() or for() statement?
continue prompt() break
for(var i = 0; i< 8; i++) {
  if(i > 1) break;
  alert(i);
}
Indicate the function that can create a constant.
define() include() defined()
define("CONSTANT_NAME", "value");
echo CONSTANT_NAME;

Last accessed pages

  1. Carrot Fantasy Undersea (63)
  2. Area and Perimeter Calculator for 2D shapes (3825)
  3. Creating objects in ActionScript (4089)
  4. Get Duration of Audio /Video file before Upload (1623)
  5. Create simple Website with PHP (8887)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (35674)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (28530)
  3. Read Excel file data in PHP - PhpExcelReader (27477)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (26649)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (23391)