jquery load () удаляет теги скрипта - обходной путь? - PullRequest
7 голосов
/ 18 мая 2011

Кто-нибудь знает, как обойти jquery .load (), убрав теги скрипта, загруженные из внешнего контента?

Есть много документов о том, что это происходит, но после 4 часов поиска в сети я не могу найти обходной путь?

Я загружаю динамически сгенерированные div - как на странице результатов поиска - и мне нужно привязать .click () к элементу внутри каждого динамически сгенерированного div. У меня есть php-файл, который выполняет генерацию html и возвращает все html в виде строки, однако я не могу связать jquery .click (), поскольку теги сценария, содержащие функцию jquery, удаляются.

вот код, который загружает внешний контент, вызывая файл php ...

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

и вот цикл из php-файла, который генерирует div (это прекрасно работает) ...

$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++;
                                }
            }

Извините, если этот второй блок кода немного перегружен - дайте мне знать, будет ли более полезным упрощенный отрывок. Тем не менее, вы можете увидеть на восьмой из последней строки кода php функцию jquery, которая должна записываться в каждый элемент div с динамически назначаемым селектором.

Конечно, могут быть и другие ошибки в коде, однако я не смогу протестировать его, пока не получу .load (), чтобы прекратить его уничтожать!

Если кто-то нашел решение этой проблемы - или даже обходной путь ограниченной благодати - блестящий!

Заранее спасибо,

Приветствия

Scott

РЕДАКТИРОВАТЬ - РЕДАКТИРОВАТЬ - РЕДАКТИРОВАТЬ - РЕДАКТИРОВАТЬ - РЕДАКТИРОВАТЬ - РЕДАКТИРОВАТЬ - РЕДАКТИРОВАТЬ

@T.J. Crowder @ Фруг

Спасибо за вашу помощь!

Я только что внимательно посмотрел на страницы, включенные в вашу демонстрацию, и да, я вижу, у вас это работает. Кажется удивительным, потому что они есть - те теги сценария, и есть так много людей, которые не могут заставить его работать - к сожалению, я один из них!

Единственные различия, которые я вижу между вашей демонстрацией и ситуацией с моим кодом, были

1) нет объявления типа в открывающем теге скрипта,

2) вы загружаете страницу с тегами скрипта как часть DOM, в то время как я загружал вывод php-строки (я действительно не думаю, что это важно, а? приходит к тому же, нет?)

3), ваш вызов .load получал целую страницу, а мой возвращал только элементы. С тех пор я изменил выходную строку, чтобы включить все, и теги, но grrrrrr ... Я до сих пор не могу получить теги проклятых скриптов, которые будут отображаться в DOM.

Есть предложения? Есть грузы, о которых я не знаю, поэтому может быть что угодно! спасибо S

Ответы [ 6 ]

22 голосов
/ 05 апреля 2013

Обновление сейчас, которое вы можете найти на сайте документации jQuery:

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

Он удаляет теги, только если вы вызываете load с определенным суффиксным селектором.

Выполнение скрипта

При вызове .load () с использованием URL-адреса без суффиксного выражения селектора содержимое передается в .html () до удаления сценариев. Это выполняет блоки скрипта до того, как они будут отброшены. Если .load () вызывается с выражением селектора, добавленным к URL, однако, сценарии удаляются до обновления DOM и, следовательно, не выполняются. Пример обоих случаев можно увидеть ниже:

Здесь любой JavaScript, загруженный в #a как часть документа, будет успешно выполнен. 1

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

Однако в следующем случае блоки скриптов в документе, загружаемом в #b, удаляются и не выполняются: 1

$('#b').load('article.html #target');
14 голосов
/ 07 мая 2013

Этот поток сейчас немного старше, но я нашел обходной путь для проблемы / функции $.load + selector + <script>, которой я хотел бы поделиться.Может быть, это будет кому-то полезно.Вместо $.load я использую это:

$.ajax({
    url: '/some/url',
    success: function(html) {
        var content = $('<div />').html(html).find('#my-custom-selector');
        $('#container-to-place-html-in').html(content);
    }
});

Приветствия, Алекс

3 голосов
/ 18 мая 2011

jQuery load не убирает теги скрипта ( пример ), и в контенте, из которого вы возвращаетесь, нет тегов скриптаваш PHP скриптЕсть некоторый JavaScript, но он неправильно встроен в теги script и поэтому не распознается браузером.

Если вы хотите, чтобы JavaScript в этом:

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

былраспознается как JavaScript, поместите его в тег script.

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

... или, что еще лучше, используйте один тег script в конце содержимого для соединения или обратного вызовав функции load.


Обновление : Повторное редактирование:

1) нет объявления типа воткрывающий тег сценария,

Не имеет значения, см. этот обновленный пример .Браузер интерпретирует тег script в соответствии с теми же правилами, к которым он всегда применяется.

2) вы загружаете страницу с тегами сценария как часть DOM, тогда как я загружал вывод строки php(Я действительно не думаю, что это имеет значение, да? К тому времени, когда он попадает в клиента, все приходит к одному и тому же, нет?)как только он попадет в браузер.

3), ваш вызов .load получал целую страницу, тогда как мой возвращал только элементы.С тех пор я изменил строку вывода, чтобы включить все, и теги, но grrrrrr ... Я все еще не могу получить теги проклятых сценариев dem Damn для отображения в DOM.

Мой пример просто загружаетсяфрагмент, а не полная страница.

Я не знаю, почему у вас не работает.Мне было интересно, связано ли это с несколькими элементами скрипта, выводимыми в цикле, или с тем фактом, что вы подключили обработчик click, но это не тот из .

Там нет ничего дляэто просто взять ваш нерабочий пример и отслоить слои постепенно, пока вы не найдете часть, которая, когда вы удаляете его, позволяет ему начать работать.Фундаментально, опять же, это , а не , что использование load делает сценарии не работающими (независимо от того, сколько людей вы считаете, что это так; это большой мир, есть много людей, которые думают почти на что угодно).Вы должны отказаться от мысли, что это связано с тем, что функция jQuery load делает что-либо со скриптами;вероятно, это не так.

Ключом к отладке такого рода вещей на самом деле является упрощение, упрощение, упрощение .убедитесь, что HTML-код, возвращаемый сервером для вызовов ajax, выглядит так, как вы думаете (никаких странных кавычек или чего-то в этом роде).Попробуйте сделать это со статическими страницами.Etc.

1 голос
/ 18 мая 2011

Не могли бы вы подтвердить, удаляет ли он сценарии или не работает привязка событий? Тем не менее, я думаю, что вы можете немного изменить подход. Сначала измените ваш скрипт как

$("#titles_wrap").load("m_scripts/m_php/titles_loader.php", function(){
                                                                $..some code
                                                                $("[class^='title_send_']").click(function(){$("#title_php_loader").load("m_scripts/m_php/title_sender.php")});
                                                                });

Затем удалите часть скрипта из кода php

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>
                                                </div>
                                            </li>';
                $i2++;
                                }
            }
0 голосов
/ 19 декабря 2013

Это отстой, я знаю, но одну вещь, которую вы можете сделать, это написать что-то вроде загружаемого html, а затем после того, как вы .ajax или .load в обратном вызове выполните замену строки -> html = html.replace (/ lscript / g, 'script');

что-то на этот счет должно вытащить тег как неисполняемый тег.

надеюсь, что это поможет:)

0 голосов
/ 18 мая 2011

Почему вы не можете использовать функцию обратного вызова для привязки событий, а не для встраивания их на свою страницу php?

Может быть, есть способ обойти это, но я бы не стал встраивать это во-первых, поэтому вы не находите других, делающих это. Если вы поместите привязки в обратный вызов, они будут прикреплены при загрузке.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...