2013-05-30 5 views
0

У меня возникла ситуация, когда тег привязки с классом confirm_booking генерируется Ajax. Поэтому я использовал delegate.Делегат, не работающий над загруженным содержимым Ajax

Разделитель, содержащий этот якорь, теперь также генерируется Ajax.
После загрузки div через Ajax эта функция не работает.

$('.restro_book_div').delegate('a.confirm_booking', 'click', function (event) { 
    event.preventDefault(); 
    $('ul.time a').removeClass('clicked_confirmed'); 
    $(this).addClass('clicked_confirmed'); 
    var $current = $(this); 
    var $reserve_restaurant_id = $current.attr('reserve_restaurant_id'); 
    var $reserve_time = $current.attr('reserve_time'); 
    var $table_type_id = $current.attr('table_type_id'); 
    var $reserve_date = $current.attr('reserve_date'); 
    var $reserve_slot = $current.attr('reserve_slot'); 
    var $reserve_discount = $current.attr('reserve_discount'); 
    var $reserve_loyalty_points = $current.attr('reserve_loyalty_points'); 
    var $reserve_table_type = $current.attr('reserve_table_type'); 
    //   alert(document.getElementById('standard-dropdown').value); 
    //   console.log($current); 
    //   console.log($reserve_loyalty_points); 
    var $jquery_time = $current.attr('jquery_time'); 
    var $restro = $current.attr('restro'); 
    $target = $current; 
    var popID = $target.attr('rel'); //Get Popup Name 
    var popURL = $target.attr('href'); //Get Popup href to define size 
    <? 
    php 
    if (is_user_logged_in()) { ?> 

     $('#' + popID + ' .popup_heading').html('<span>THIS BOOKING IS VALID FOR</span> ' + $reserve_table_type + ' <span>PEOPLE AT</span> ' + $restro + '<br/> <span>ON</span> ' + $reserve_date + ' <span>AT</span> ' + $jquery_time); <? php 
    } ?> 

    //Pull Query & Variables from href URL 
    var query = popURL.split('?'); 
    var dim = query[1].split('&'); 
    var popWidth = dim[0].split('=')[1]; //Gets the first query string value 

    //Fade in the Popup and add close button 
    $('#' + popID).fadeIn().css({ 
     'width': Number(popWidth) 
    }).prepend('<a style = "display:inline;" href="#" class="close"><img src="<?php echo DIVATEMPLATEPATH."/".IMAGEPATH ?>/close.png" class="btn_close" title="Close Window" alt="Close" /></a>'); 

    //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css 
    var popMargTop = ($('#' + popID).height() + 80)/2; 
    var popMargLeft = ($('#' + popID).width() + 80)/2; 

    //Apply Margin to Popup 
    $('#' + popID).css({ 
     'margin-top': -popMargTop, 
      'margin-left': -popMargLeft 
    }); 

    //Fade in Background 
    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag. 
    $('#fade').css({ 
     'filter': 'alpha(opacity=80)' 
    }).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 

    return false; 
}); 

ответ

2

Тогда вы должны предназначаться следующего родителя, который не является динамическим, или документ, если нет такого родителя:

$(document).on('click', 'a.confirm_booking', function(event){ 
    // do stuff 
}); 

и() будет предпочтительным методом в новые версии jQuery!

+0

Не повезло, я попробовал. :( –

+0

Если это не работает, у вас либо нет элемента привязки с классом confirm_booking, либо вы используете старую версию jQuery? – adeneo

+0

эта вещь работает, когда родительский div тега привязки статичен. Но не тогда он загружается динамически –

Смежные вопросы