Question

I use live(‘click … while using jQuery v1.8.3 and it works, but I realized live was depracated as of v1.7 and I should change to on(‘click

Now when the user clicks links it does nothing, below is a copy of the jquery/js

It only works when you click on the a.view_subscriptions link.

Any help is appreciated.

$(document).ready(function() {


  function get_month()
  {
    var u = $("#days_for_month_url").attr("href");

    var form_data = {
      ajax : '1'
    };

    $.ajax({
      type: 'POST',
      dataType: 'html',
      url: u,
      data: form_data,
      success: function( msg ) {

        $('#display-month').html(msg);

      } // end success

    }); // end ajax

    return false;
  }

  get_month();

  $("a.view_events").on('click', function(e) {
    e.preventDefault();
    var date = $(this).data('date');

    // change if URL changes
    var u = $("#events_for_day_url").attr("href");

    var form_data = {
      year : $(this).data('year'),
      month : $(this).data('month'),
      day : $(this).data('day'),
      date : $(this).data('date'),
      ajax : '1'
    };

    $.ajax({
      type: 'POST',
      dataType: 'html',
      url: u,
      data: form_data,
      success: function( msg ) {

        $('#display-events').html(msg);
        $('#display-event_detail').html('');

      } // end success

    }); // end ajax

    return false;

  }); // end on.click view-events


  $("a.view_event_details").on('click', function(e) {
    e.preventDefault();
    var u = $("#event_detail_url").attr("href");

    var form_data = {
      event_id : $(this).data('event_id'),
      ajax : '1'
    };

    $.ajax({
      type: 'POST',
      dataType: 'html',
      url: u,
      data: form_data,
      success: function( msg ) {

        $('#display-event_detail').html(msg);
        $('#display-events').html('');

      } // end success

    }); // end ajax

    return false;

  }); // end on.click view_event_details


  $("a.month_link").on('click', function(e) {
    e.preventDefault();
    $('#display-events').html('');

    var u = $("#days_for_month_url").attr("href");

    var form_data = {
      month_url : $(this).data('month_url'),
      ajax : '1'
    };

    $.ajax({
      type: 'POST',
      dataType: 'html',
      url: u,
      data: form_data,
      success: function( msg ) {

        $('#display-month').html(msg);

      } // end success

    }); // end ajax

    return false;

  }); // end on.click view-month

 $("a.view_subscriptions").on('click', function(e) {
    e.preventDefault();
    var u = $("#subscriptions_url").attr("href");

    var form_data = {
      ajax : '1'
    };

    $.ajax({
      type: 'POST',
      dataType: 'html',
      url: u,
      data: form_data,
      success: function( msg ) {

        $('#display-subscriptions').html(msg);
        //$('#display-subscriptions').toggle();

      } // end success

    }); // end ajax

    return false;

  }); // end on.click view-subscriptions

 $("#update_subscriptions").on('click', function(e) {
    e.preventDefault();
    var u = $("#update_subscriptions_url").attr("href");

    var vals = []
    $('input:checkbox[name="calendar[]"]').each(function() {
        if (this.checked) {
            vals.push(this.value);
        }
    });

    var form_data = {
      ajax : '1',
      calendar: vals,
    };

    $.ajax({
      type: 'POST',
      dataType: 'html',
      url: u,
      data: form_data,
      success: function( msg ) {

        get_month();
        $('#display-subscriptions-update').html(msg).fadeOut(6000);
        $('#display-subscriptions').html('');

      } // end success

    }); // end ajax

    return false;

  }); // end on.click view-subscriptions

}); // end document ready

Answer 1

This isn’t just a change in the name of a function. The binding is immediate and concerns only the elements in the jQuery set at time of binding. Pass as argument the selector of the dynamic elements.

Instead of

 $("a.view_events").on('click', function(e) {

Use

  $(document).on('click', "a.view_events", function(e) {

(or better, replace document by an element that is present when you call the function and that will hold your a.view_events elements)