Реализация jQuery внутри div, в котором есть контент, который был только что загружен с помощью jQuery .load () - PullRequest
Новая
       23

Реализация jQuery внутри div, в котором есть контент, который был только что загружен с помощью jQuery .load ()

2 голосов
/ 16 декабря 2011

У меня есть div, который обновляется с помощью .load () с использованием jQuery. После того, как это обновлено, новое содержимое появляется в div. Однако новый контент содержит jQuery, и он не работает, даже если он работает, когда этот контент загружается на его собственную страницу.

Div также находится в родительском окне, однако код jQuery, который обновляет div, находится внутри iframe. Код вызывает top.document (родительское окно), чтобы обновить div, находящийся за пределами iframe.

Я покажу полный код здесь:

Это главная страница с именем test.php. У него просто простой iframe, а под ним - div, который обновляется, когда код сообщает об этом в iframe. 

<html>
<head>
</head>
<body >
<iframe src="test2.php" width="400" height="400" frameborder="3"></iframe>
<div id="target">This text will be replaced.</div>
</body>
</html>

Вот test2.php, который находится внутри iframe, и это только начальная страница iframe, так что вы можете легко нажать на ссылку, которая активирует следующую страницу, которая включает код jQuery при загрузке страницы. 

<html>
<head>
</head>
<body>
<a href="test3.php">Click Me, if the div below reloads with the jqery content it worked!</a>
</body>
</html>

Вот страница test3.php с кодом jQuery, который обновляет div вне iframe. .Load () работает, а .get () - нет. Я пытался вызвать jQuery с помощью .get () и .getscript (), но это сработало. Я также попытался обернуть их в .bind () .on () .live (), однако, если вы знаете способ их использования таким образом, что, как вы думаете, это будет работать, не стесняйтесь опубликовать его. 

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

$('#target', top.document).load("test4.php");
$('#target', top.document).get('testb.js');

</script>
</head>
<body>
Sent
</body>
</html>

Это test4.php, и это новое содержимое загружается в div после обновления. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<p>....Polo</p>
<script type="text/javascript" src="testb.js"></script>

Теперь вот jQuery, который я пытался реализовать внутри div, и это то, что находится внутри testb.js на странице test3.php и test4.php. Я собирался делать более сложный код, но поскольку jQuery вообще не работает, я решил упростить его, пока не выясняется причина, по которой jQuery не работает. 

var myvariable = "Marco";
$("p").prepend(myvariable);

Большое спасибо за любую помощь, которую вы можете оказать!

1 Ответ

1 голос
/ 21 декабря 2011

Я бы порекомендовал вам не делать это таким образом. Конечно, у вас не должно быть фрагментов, которые затем загружают больше фрагментов. Этот путь ведет к безумию.

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

У меня были проблемы с load (), но я не могу вспомнить точные детали. Возможно из-за расхождений между браузерами? В итоге мы использовали get () вместо load ().

Большим камнем преткновения был сбой $ ('# target'), потому что новый Javascript не был прикреплен к документу вовремя. Таким образом, он не найдет идентификатор в главном документе при запуске во время вызова load (). Я смог обойти это с помощью setTimeout () 

<body>
    <div id="stuff>
        <script type="text/javascript">
            setTimeout(function() {
                $('#target', top.document).get('testb.js');
            }, 1);
        </script>
        Sent
    </div>
</body>

хитрый момент может быть в том, как я схватил DIV: 

$.get("/foo/bar", function(html) {
    var div = $('<div></div>');
    div.html(html);
    div.find('#stuff').detach().appendTo(target);
});
...