problem binding functions

Question

I call a section of another page in to the parent page like this:

$(function() {
    $("#subscribe").click(function () {
        $("#singleContent").load('purchaseForm.php #Content');
    });
});

no problem there. I am having an issue getting functions inside of 'purchaseForm.php' to run. I've tried the ".live" function, but can only bind that to events like click. I need to hide some things and get this code to run:

$('[class^=toggle-item]').hide();
$('[class^=link]').live('click', function(e) {
    $('.toggle-item-' + this.className).slideToggle("fast");
    $('span',this).text(function(i,txt) {
        return txt === "Learn More..." ? "Close" : "Learn More...";
        e.preventDefault();
    });
});

$(function() {
    var $add = $('input.add');
    $add.live('click', function() {
        $add.removeAttr('checked');
        $(this).attr('checked', true);
    });
});

How do I bind the above functions to the .load function?

TNC · Accepted Answer · 2011-02-25 20:17:57Z

2

You could do something like this:

$(function() {
    $("#subscribe").click(function () {
        $("#singleContent").load('purchaseForm.php #Content', function()
        {
            $('[class^=toggle-item]').hide();
            $('[class^=link]').live('click', function(e) {
                $('.toggle-item-' + this.className).slideToggle("fast");
                $('span',this).text(function(i,txt) {
                    return txt === "Learn More..." ? "Close" : "Learn More...";
                    e.preventDefault();
                });
            });

            $(function() {
               var $add = $('input.add');
               $add.live('click', function() {
                   $add.removeAttr('checked');
                   $(this).attr('checked', true);
               });
            });
        });
    });
});

answered Feb 25, 2011 at 20:17

TNC

5,3861 gold badge28 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dirty Bird Design Over a year ago

North Creative - perfect was not getting the structure correct. Would you recommend doing it this way or including all functions in an external file as Pointy "pointed" out?

TNC Over a year ago

Yeah, I would definitely externalize it wherever possible. It's a lot easier to maintain and track.

Pointy · Accepted Answer · 2011-02-25 20:15:17Z

1

That's a jQuery bug I reported a while ago. To my knowledge, it's not fixed yet.

I'll find the bug and link it. Specifically, when you use ".load()" with a "context" like that (the selector following the URL), it does not run <script> tags in the content that's loaded.

edit — ok here is the bug.

To make your setup work, probably the best thing would be to have that code in the surrounding page that loads the content.

answered Feb 25, 2011 at 20:15

Pointy

415k62 gold badges600 silver badges631 bronze badges

2 Comments

Pointy Over a year ago

Well, a couple ways: first, I avoid doing that :-) Second, I try to make it so that all my pages have the same code available, as much as possible in external .js files.

Dirty Bird Design Over a year ago

good point. I should use one external js file for this set of pages that houses all the functions. thx man.

Collectives™ on Stack Overflow

problem binding functions

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related