Jquery Course

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="https://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 HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Register Events to elements included with jQuery ajax

Last accessed pages

  1. AJAX Course, free Lessons (15632)
  2. Upload Script for Gallery of Images and Audio files (8790)
  3. ActionScript 3 Lessons (6310)
  4. MouseEvent - Events for Mouse (1984)
  5. JavaScript Course - Free lessons (26045)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (528)
  2. PHP Unzipper - Extract Zip, Rar Archives (427)
  3. SHA256 Encrypt hash in JavaScript (411)
  4. Read Excel file data in PHP - PhpExcelReader (364)
  5. Create simple Website with PHP (338)