Javascript Popup-Fenster funktioniert nicht

Question

Ich verwalte eine Website, die ich nicht erstellt habe. Die Website enthält Links, über die Sie auf den Link klicken können. Ein modales Fenster wird mit Inhalten aus einer anderen HTML-Datei geöffnet. Es hat früher funktioniert und jetzt nicht.

Ich habe alle relevanten Dateien zwischen jetzt und wenn ich die Website übernahm, aber keine Änderungen sehen, die dies beeinflusst hätten.

das Popup-Fenster sind thusly genannt:

<?php bioLinkText('Daniel Jones', 'Read more about Dr. Jones'); ?></p> 

Die Seite es

Von der functions.php Datei ist /bios/daniel-jones.html öffnen sollte:

function bioLinkText($name,$text) { 
$name = strtolower(str_replace(" ","-",$name)); 
echo '<a href="/bios/'.$name.'.html" class="popUp">'.$text.'</a>';} 

Dieser Teil funktioniert OK. Aber es hat ein modales Fenster erzeugt und jetzt öffnet es den Link wie ein normaler Link.

Von der global.js Datei:

// AJAX Popups 
    function popUp(page,randId) { 
     $('body').append(
     '<div id="'+randId+'" class="pWin" style="display:none;position:fixed">'+ 
      '<span class="pHead">'+ 
       '<a href="'+page+'" target="_blank">Open in new window</a>'+ 
       '<span class="pClose">X</span>'+ 
      '</span>'+ 
      '<div class="pBod"></div>'+ 
     '</div>' 
     ); 

     var top = (h/2) - 150; 
     var left = (w/2) - 300; 

     $('#'+randId+'.pWin').addClass('large').css({top:top+'px',left:left+'px'}); 
     $('#'+randId+' .pBod').html('<img src="/images/loading.gif" alt="loading"/>').load(page+' #content', function() { 
      $('.pWin').show(300); 
      $('.pBod #content').find('img').filter('#portrait').attr('src', function(index, src) { 
       return '/bios/' + src; 
      }); 
     }); 

    } 

    $('.popUp').click(function() { 
     var randId = randomString(); 
     var num = $('.pWin').length; 
     if (num < 5) { 
      var page = $(this).attr('href'); 
      popUp(page,randId); 
      $('#'+randId+'.pWin').draggable({handle:'.pHead'}).resizable({alsoResize:'#'+randId+' .pBod', minWidth: 320, minHeight: 280, maxWidth: 800, maxHeight: 600}); 
     } 
     return false; 

    }); 

    function pClose(btn) { 
     var pWin = btn.closest('.pWin'); 
     pWin.hide(200, function() { pWin.remove(); }); 
    } 
    $('.pClose').live('click',function() { 
     var btn = $(this); 
     pClose(btn); 
    }); 
    $(document).keyup(function(e) { 
     if (e.keyCode == 27) { 
      $('.pWin').hide(200, function() { $('.pWin').remove(); }); 
     } 
    }); 

Von der style.css-Datei:

.popUp, .pHead a { padding-right: 16px; background: url(/images/external.gif) 100% 50% no-repeat; } 

.popUp.noBg { background:none; padding-right:0; } 

Ich habe versucht, dies für 10 + Stunden, um herauszufinden. Jede Hilfe würde sehr geschätzt werden. Die eine Sache ist ... Ich verstehe nicht, wie die JavaScript-Funktion popUp aufgerufen würde. Ist das die fehlende Zutat?

Answer 1

Try this:

//Make sure the DOM is ready (If you call this function before '.popUp' exists, it wont be matched, and the '.click' handler wont be added. 
$(document).ready(function() { 

    $('.popUp').click(function(e) { 
     //Prevent the default action (Clicking the button) 
     e.preventDefault(); 
     //..Your code here 
    }); 
}); 

Answer 2

Nun, ich es herausgefunden. Ich habe die Funktion, das Hinzufügen eines Onclick = "Popup()" Eigentum an die a href, und jetzt funktioniert es:

function bioLinkText($name,$text) { 
$name = strtolower(str_replace(" ","-",$name)); 
echo '<a href="/bios/'.$name.'.html" onclick="popup()" class="popUp">'.$text.'</a>'; 

}