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>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute is used in <a> tag for the address of the link?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
  font-family:"Calibri",sans-serif;
}
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
alert(nr_elms);
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr = array(1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Register Events to elements included with jQuery ajax

Last accessed pages

  1. Area and Perimeter Calculator for 2D shapes (321)
  2. Insert, Select and Update NULL value in MySQL (669)
  3. Working with getElementsByTagName (818)
  4. Download HTML - XHTML resources (167)
  5. jQuery UI draggable - Drag elements (1050)

Top accessed pages

  1. PHP-MySQL free course, online tutorials PHP MySQL code (3236)
  2. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (3121)
  3. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (3105)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (2809)
  5. PHP Chat Script (2542)