Add Event Listener to Anchors w/ Class + Popup URL

Question

I have a strange predicament where I can't add onclick to anchor tags. I have to add event listeners / attach event. I want to be able to add a class to an anchor and after the document is ready - create an event listener and make it open a popup window of the links URL. So I need to collects the anchors, collect the URLs, and make it open up in a new window.

I tried creating it with a jQuery/JavaScript mix:

Custom Script jQuery/JS

$(document).ready(function() {
    $numClass = document.getElementsByClassName('popUp');
    $className = 'popUp';
    $left = (screen.width/2)-(650/2);
    $top = (screen.height/2)-(400/2);
    
    alert($className[1]);
    
    for(i = 0; i < $numClass; i++)
    {
        if($className[i].addEventListener)
        {
            $className[i].addEventListener('click', function(e){
                getHref();
            },true);
        }
        else{
            $className[i].attachEvent('click', getHref);
        }
    }
    
    function openWindow($url){
        window.open(url, "location=1,status=1,scrollbars=1,width=650,height=400,left="+left+",top="+top);
    }
    
    function getHref(){
        $href = className.getAttribute('href');
        openWindow($href);
    }
});

but it turns out length is just bring up characters. Then I found this script online:

Online Script

$(document).ready(function() {
    var elArray = document.getElementsByTagName('a');
    for(var i=0; i<elArray.length; i++){
      if(elArray[i].className == 'popUp') continue;
        for(var j=0; j<elArray.length; j++){
            elArray[j].onclick = function(){
                alert(this.innerHTML + ' : ' + this.href);
            };
        }
    }
});

which is a lot shorter, but it just doesn't work, no errors just not working. Anybody have any fixes for this?

My Entire HTML Doc

<html>
<head>

<script type="text/javascript" src="jquery1.6.4.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var elArray = document.getElementsByTagName('a');
        for(var i=0; i<elArray.length; i++){
          if(elArray[i].className == 'popUp') continue;
            for(var j=0; j<elArray.length; j++){
                elArray[j].onclick = function(){
                    alert(this.innerHTML + ' : ' + this.href);
                };
            }
        }
    });
</script>
</head>
<body>

<a href="http://www.yahoo.com" class="popUp">test1</a>
<a href="http://www.google.com" class="popUp">test2</a>
<a href="http://www.msn.com" class="popUp">test3</a>

</body>
</html>

joshuahealy · Accepted Answer · 2012-03-15T22:02:46.213

3

This should do the trick:

$(document).ready(function() {
    $('.popUp').on('click', function() {
         openWindow(this.href);
         return false;
    });
});

function openWindow(url){
    var left = (screen.width/2)-(650/2);
    var top = (screen.height/2)-(400/2);

    window.open(url, '_blank', "location=1,status=1,scrollbars=1,width=650,height=400,left="+left+",top="+top);
}

edited Mar 15 '12 at 22:02

answered Mar 15 '12 at 21:39

joshuahealy

3,529
22
29

@Howdy_McGee .on is added since jQuery v1.7. Probably you are using older version of jQuery. – Selvakumar Arumugam Mar 15 '12 at 21:41
Because you're using jQuery version 1.6.2, change 'on' to 'live', and bam, it's working. – Ohgodwhy Mar 15 '12 at 21:41
I edited it and put left and top in there... Best to check them right before opening incase they resize the window – joshuahealy Mar 15 '12 at 21:42
@Howdy_McGee I would change .on to .bind instead of .live if it is not a dynamic element. – Selvakumar Arumugam Mar 15 '12 at 21:42
@appclay it's opening in a new tab instead of popUp window. Giving me event.LayerX/Y warning too. – Howdy_McGee Mar 15 '12 at 21:44
@Howdy_McGee or use "click" like ori's answer – joshuahealy Mar 15 '12 at 21:44
1

Okay, I didn't test the window.open call, I just copied your one :) But the functions are all firing right? – joshuahealy Mar 15 '12 at 21:45
@appclay the events are firing but not sure why it's not opening in pop up window. It opens up when I use oldschool eventlistener/attachevent – Howdy_McGee Mar 15 '12 at 21:47
Maybe take a look at [this question](http://stackoverflow.com/questions/726761/javascript-open-in-a-new-window-not-tab) – joshuahealy Mar 15 '12 at 21:52
I figured it out. I was missing the "Title" from the parameter list which was throwing the whole thing off, added blank one and were good. Your awesome thanks for your help!!!! – Howdy_McGee Mar 15 '12 at 21:57
Okay I added the _blank in my answer so others will see it. – joshuahealy Mar 15 '12 at 22:03

score 1 · Answer 2 · answered Mar 15 '12 at 21:39

1

This should work:

$(document).ready(function() {

    $('a.popup').click(function(event) {
        event.preventDefault();
        openWindow($(this).attr('href');
    });

});

answered Mar 15 '12 at 21:39

ori

7,817
1
27
31

score 1 · Answer 3 · answered Mar 15 '12 at 21:46

$(document).ready(function() {
    $('.popUp').click(openWindow)
});



function openWindow(){

   var left = (screen.width/2)-(650/2);
   var top = (screen.height/2)-(400/2);

    window.open(this.href, "location=1,status=1,scrollbars=1,width=650,height=400,left="+left+",top="+top);
    return false;
}

Add Event Listener to Anchors w/ Class + Popup URL

Custom Script jQuery/JS

Online Script

My Entire HTML Doc

3 Answers3