Javascript each function doesn't work in jQuery Colorbox

Question

If a link is pressed on my startpage a jQuery Colorbox opens with my new site.

<script type="text/javascript">    
        $(document).ready(function(){        
            $(".deletealbum").each(function(){         
                $(this).click(function(event){
                    event.preventDefault();
                    var albumname = $(this).attr('name');
                    alert(albumname);               
                    $.post('deleteAlbum.php',
                    {
                        albumname: albumname
                    });                                       
                });
            });
        });   
    </script>

This is my Javascript - Code and below I have links, which look this way

echo "<a href='#' class='deletealbum' id='$Album' name='$Album'> DELETE </a>";

If I press the button, nothing happens in my colorbox, but if i include this page on my start page it works just perfectly.

So why doesn't it work in the colorbox ?

You don't need to use `.each(` to bind handlers to multiple elements. You can do `$(".deletealbum").click(` to bind to all of them. — gen_Eric, Apr 09 '12 at 14:39
@Pointy There was a picture in it, but that wasn´t the mistake unfortunately. — user1124288, Apr 09 '12 at 14:42
@Rocket This doesn´t work either.. Like I said, if i include the page on my start-page it works perfectly... So it´s just about the javascript in the colorbox ?! — user1124288, Apr 09 '12 at 14:44
@user1124288: I wasn't suggesting that as the solution, I was just pointing that out. — gen_Eric, Apr 09 '12 at 14:58

score 0 · Answer 1 · answered Apr 09 '12 at 14:45

0

Does your Colorbox thing use an iFrame? Your snippet may not add the event handlers on the elements you're willing to add them on in that case.

answered Apr 09 '12 at 14:45

Pierre Voisin

661
9
11

This could be the problem ! Can you tell me how does this work ?! – user1124288 Apr 09 '12 at 14:51
Did you have a look to Larry Battle's links? – Pierre Voisin Oct 20 '12 at 23:46

score 0 · Answer 2 · edited May 23 '17 at 12:20

Run this code and see if you get an error message.

$(function () {
    var selector = ".deletealbum";
    var $el = $(selector);
    if (!$el.length) {
        var errMsg = "Error can't find '" + selector + "'";
        throw new Error(errMsg);
    }
    $el.click(function (e) {
        var albumname = $(e.target).attr('name');
        $.post('deleteAlbum.php', {
            albumname : albumname
        });
        return false;
    });
}());

If you get an error message then you're going to have to find the frame id which has the element you want. You should be able to find element within iframes and frames using $( window.frame[ id ] ).find( selector ).

Here's a link for more information.

How can I get an element from within a frameset frame using JavaScript?

Javascript - Get element from within an iFrame

I would inspect your html with firebug to speeedup the process.

Thank you, but I don´t get an error message. It seems like there isn´t any javascript on this page. (It is there, i checked it in the colorbox) — user1124288, Apr 09 '12 at 15:22

Javascript each function doesn't work in jQuery Colorbox

2 Answers2