Question

The second “click” function of this script doesn’t work, I think it’s simply a syntax issue. I’m quite new to this. But I need to find a simple way call the live “click” function once for an array of vars.

The script works, just not the second part.

I’m looking for an efficient way to replaceWith an array of different vars, each matching a classed link, and without creating a new function every time.

Any suggestions would be great!

Thanks in advance

<script type="text/javascript">

    $(window).load(function(){

        $('a.pow').live("click",function(e) {

            webgl = $('<iframe src="http://s..."> </iframe>');
            e.preventDefault();     
            $('#slider-wrapper').replaceWith(webgl);
        });

        $('a.biff').live("click",function(e) {

            video = $('<iframe src="http://s..."> </iframe>');
            e.preventDefault();
            $('#slider-wrapper').replaceWith(video);    
        });
    });

</script>

html

<div id="slider-wrapper">
    <div>
        <a class="pow" href="">
        </a>
    </div>
    <div>
        <a class="biff" href="">
        </a>
    </div>

next one could be..

    <div>
        <a class="batman" href="">
        </a>
    </div>
</div><-- close slider wrapper -->

Answer 1

You can give all your anchors that will load iframes a common class, move the description of the anchor from class to a custom attribute, and have the event handler to act on the custom attribute instead.

<div id="slider-wrapper">
    <div>
        <a class="link" href="" data-desc="pow">
        </a>
    <div>
    <div>
        <a class="link" href="" data-desc="biff">
        </a>
    <div>
    <div>
        <a class="link" href="" data-desc="batman">
        </a>
    <div>
</div>

And in your script:

<script type="text/javascript">

    var desc_url_map = {
        "pow" : "http://s...",
        "biff" : "http://s...",
        "batman" : "http://s..."
    };

    $(window).load(function () {
        $('a.link').live('click', function(evt) {
            item = $('<iframe src="' + desc_url_map[this.dataset.desc] + '"></iframe>');
            $('#slider-wrapper').replaceWith(item);
            evt.preventDefault();
        });
    });

</script>

Hope there are no bugs 🙂