Question

After reloading the page this code works as expected – javascript works and opens a popup. But when content of ajaxUpdatable is changed using AJAX, it doesn’t work. How can I “rebind” or make something .live() for my eauth function here?

$("a.google").eauth({"popup":{"width":880,"height":520},"id":"google"});

Full page here.

<div class="ajaxUpdatable">
   <a class="direct auth-link google" href="/coverication/?
r=site/login&amp;service=google">Google</a>
<a class="direct auth-link yandex" href="/coverication/?r=site/login&amp;service=yandex">Яндекс
</div>

<script type="text/javascript">
jQuery(function($) {
    var popup;

    $.fn.eauth = function(options) {
        options = $.extend({
            id: '',
            popup: {
                width: 450,
                height: 380
            }
        }, options);

        return this.each(function() {
            var el = $(this);
            el.live('click', function() {
                      if (popup !== undefined)
                          popup.close();

                      var url = this.href + (this.href.indexOf('?') >= 0 ? '&' : '?') + 'js';
                      /*var remember = $(this).parents('.auth-services').parent().find('.auth-services-rememberme');
                      if (remember.size() > 0 && remember.find('input').is(':checked')) 
                          url += '&remember';*/

                      var centerWidth = ($(window).width() - options.popup.width) / 2;
                      var centerHeight = ($(window).height() - options.popup.height) / 2;

                      popup = window.open(url, "yii_eauth_popup", "width=" + options.popup.width + ",height=" + options.popup.height + ",left=" + centerWidth + ",top=" + centerHeight + ",resizable=yes,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=yes");
                      popup.focus();

                      return false;
                  });
        });
    };
});

$("a.google").eauth({"popup":{"width":880,"height":520},"id":"google"});
$("a.yandex").eauth({"popup":{"width":900,"height":550},"id":"yandex"});
</script>

Answer 1

try this

$("a.google").live("eauth", function({
    "popup": { "width": 880, "height": 520 },
    "id": "google"
});