jquery load() strips script tags - workaround?

Question

Does anyone know of a work around for jquery .load() stripping out the script tags loaded from external content?

There's a lot of documentation of the fact that this happens but after something like 4 hours searching the net I can't find a work around?

I'm loading dynamically generated divs - similar to a page of search results - and need to bind a .click() to an element within each dynamically generated div. I've a php file that does the html generation work and returns all the html as a string however I can't bind the jquery .click() as the script tags containing the jquery function get stripped out.

here's the code that loads the external content by calling the php file...

$("#titles_wrap").load("m_scripts/m_php/titles_loader.php", function(){
                                                                $..some code
                                                                });

and here's the loop from the php file that generates the divs (this works fine)...

$tag1='<script type="text/javascript">';
$tag2='</script>';

while($result_array = mysql_fetch_array($result)) {

            if($i2<=($titles_total)){

                $_SESSION['titles_string'] .= '<li id="listItem_'.$i2.'">

                                                <div id="titles_list_item">

                                                    <div id="titles_list_image_box" style="background-image: url(../../images/thumbs_test/'.$result_array[0].'); background-repeat: no-repeat; ">'.($i2+1).'</div>
                                                    <div id="title_php_loader"></div>
                                                        <div id="title_info_wrap">

                                                        <div id="title_current"><span class="title_current_grey" >current title: </span><br>'.$result_array[1].'
                                                            </div>

                                                                <div id="title_form_wrap">
                                                                    <span class="title_current_grey" >new title: </span><br><input name="title_input_'.$i2.'" id="title_input_'.$i2.'" type="text" class="title_input"></input>
                                                                    <div id="title_send" class="title_send_'.$i2.'">GO</div>
                                                                </div>

                                                            </div>


                                                    '.$tag1.'
                                                    $(".title_send_'.$i2.'").click(function(){$("#title_php_loader").load("m_scripts/m_php/title_sender.php")})
                                                    '.$tag2.'

                                                </div>
                                            </li>';
                $i2++;
                                }
            }

Sorry if this second code block is a bit on the 'overkill' side - let me know if a simplified excerpt would be more useful. That said, you can see on the 8th from last line of the php code the jquery function that should get written into each div with a dynamically assigned selector.

Of course, it could be that there's other errors in the code however I'm not going to be able to test it until I can get .load() to stop trashing it!

If anyone's found a solution to this - or even a workaround of limited grace - brilliant!

Thanks in advance,

Cheers,

Scott

EDIT - EDIT - EDIT - EDIT - EDIT - EDIT - EDIT - EDIT

@T.J. Crowder @Frug

Thanks for your help!

I've just had a good hard look at the pages involved in your demo and yes, I see you've got it working. Seems amazing cos there they are - those script tags and there are SO many people out there who can't get it to work - unfortunately I'm one of them!

The only differences I see between your demo and my code situation was

1) no type declaration in the opening script tag,

2) you're loading a page with script tags as part of the DOM, whereas I was loading php string output (I really don't think this matters tho', eh? By the time it hits the client it all comes to the same thing, no?)

3), your .load call was fetching a whole page whereas mine was returning only elements. I've since changed the output string to include all , and tags but grrrrrr...I still can't get dem damn script tags to show up in the DOM.

Any suggestions? There's loads I don't know about so could be anything! thanks S

Answer 1

Update now, which you can find on the jQuery doc site:

http://api.jquery.com/load/

It DOES strip tags only if you call load with a specific suffixed selector..

Script Execution

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed. An example of both cases can be seen below:

Here, any JavaScript loaded into #a as a part of the document will successfully execute. 1

$('#a').load('article.html');

However, in the following case, script blocks in the document being loaded into #b are stripped out and not executed: 1

$('#b').load('article.html #target');