javascript не работает в новой части при загрузке новой части с использованием jquery и HTML 5

Question

Привет, как подсказывает мой заголовок, я использую следующий код для динамической загрузки части страницы (здесь левый идентификатор)

function callBackFunctionLoadNextBackInPage(data)
{
    //alert(data);
    $("#left").fadeTo(100,1);
    var data = $(data).find( '#left' );
    $("#left").html(data);
    if(supports_history_api())
    {
        history.pushState(null, null, loadNextBackInPage_URL);  
        if(!popEventListnerAdded) {
            window.addEventListener("popstate", function(e) {
            loadNextBackInPage(location.href);
            },false);
            popEventListnerAdded = true;
        }

    }
    else
    {

    }
}
function loadNextBackInPage(url,parm)
{
    //alert(url);
    loadNextBackInPage_URL = url;
    $("#left").fadeTo(100,.2);
    $.post(url,parm,callBackFunctionLoadNextBackInPage,'html');
}

Вот пример того, как я это делаю (нажмите на ссылку показать детали

Проблема:

Он загружается правильно ... но JavaScript не работает. Например: 1. Я использую обсуждение для комментариев, и это не такзагрузить в следующем разделе

Добавить комментарий, используя Facebook, Twitter, Yahoo !, DISQUS, OpenID или Anonymus

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

Также, например: кнопка SHARE (Нажмите здесь) должна развернуться, используя следующий код:

<script language="javascript" type="text/javascript">
function showHideDiv()
{
    var divstyle = new String();
    divstyle = document.getElementById("share").style.display;
    if(divstyle.toLowerCase()=="block" || divstyle == "")
    {
        document.getElementById("share").style.display = 'none';
    }
    else
    {
        document.getElementById("share").style.display = 'block';
    }
}
</script> 

Но это не так! ... но работает, если я обновляю страницу (т.е. снова загружаю URL-адрес)

В основном я хочу, чтобы обсуждение с комментариями работало. Я использую следующие коды для его генерации

<div class="entry">
  <h2>Add a Comment using Facebook, Twitter, Yahoo!, DISQUS, OpenID or Anonymus </h2>
  <p>


  <div id="disqus_thread"></div>
<script>
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = '[written here]'; // required: replace example with your forum shortname

    // The following are highly recommended additional parameters. Remove the slashes in front to use.
     var disqus_identifier = 'page=show_song_details.php&songid=<?php echo $sid ?>&n=0&back=no';
     var disqus_url = '<?php echo $main_root.$_SERVER['REQUEST_URI']; ?>';
    var disqus_developer = 1 ;
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

  </p>


</div>

Answer 1

Проблема в том, что jQuery удаляет теги <script> всякий раз, когда вы создаете объект jQuery из строки HTML для выполнения некоторых манипуляций с ним в вашем случае, в вашем случае .find().

Лучше всего читать весь HTML-текст как текст, а затем использовать регулярные выражения, чтобы разделить его и вставить соответствующую часть в ваш документ. Вам также следует подумать о редизайне части вашего проекта, так как, по моему мнению, загрузка частей внешней страницы с помощью частичных сценариев не является хорошей практикой и может быть сложной для поддержки в долгосрочной перспективе. Если, конечно, у вас есть хорошо продуманный модульный дизайн, и вы знаете, что делаете.

Эта проблема является точной копией другой ветки, хотя я не могу проголосовать за ее закрытие из-за щедрости. Посмотрите на мой ответ здесь и посмотрите, поможет ли он: jquery: оставьте тег после .find ()

Answer 2

Я думаю, что проблема в том, в каком порядке запускаются ваши события.Когда вы загружаете страницу как обычно, обсуждение JS, скорее всего, запускается при срабатывании load.Поэтому, когда вы загружаете с помощью ajax, он не запускает событие load.Вместо этого вам придется инициализировать эти компоненты в вашем методе callBackFunctionLoadNextBackInPage или использовать другой обратный вызов.

$.post(url,parm,function(data) {
    callBackFunctionLoadNextBackInPage(data);

    // Initialize here
    $('.element').plugin_initializer();

},'html');

Answer 3

Попробуйте заменить onclick на jquery live () и посмотрите, работает ли он. Также ваш showHideDiv может быть уменьшен до одной строки:

$("#share").toggle()

Answer 4

Функция showHideDiv() недоступна на главной странице (в списке) и доступна только на дополнительной странице (отдельная песня). В следующем коде вы получаете только подмножество dom страницы, что означает, что функции JS, созданные вами на остальной части страницы, не выполняются.

$("#left").fadeTo(100,1);
var data = $(data).find( '#left' );
$("#left").html(data);

Это можно исправить, включив необходимые функции JS на главной странице.

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

var showHideDiv = function() {...};

Это заставляет меня чувствовать себя немного грязно ... но как насчет запуска eval на data. Что-то вроде:

$("#left").fadeTo(100,1);
var data = $(data).find( '#left' );
$("#left").html(data);

data.find('script').each(function() {
  eval($(this).text());
});

Редактировать: Возможно, вы можете попробовать globalEval функцию jQuery попробовать.

$("#left").fadeTo(100,1);
var data = $(data).find( '#left' );
$("#left").html(data);

data.find('script').each(function() {
  $.globalEval($(this).text());
});