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 tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Register Events to elements included with jQuery ajax

Last accessed pages

  1. setTimeout and this with bind() method in JavaScript class (4924)
  2. Star shapes with CSS (11114)
  3. Follow the mouse cursor with a DIV inside a Parent (8273)
  4. CSS Course - Free lessons (21648)
  5. SHA256 Encrypt hash in JavaScript (31103)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (318)
  2. PHP Unzipper - Extract Zip, Rar Archives (110)
  3. Read Excel file data in PHP - PhpExcelReader (101)
  4. SHA1 Encrypt data in JavaScript (81)
  5. Get and Modify content of an Iframe (74)