Question

我在这里遇到了一个重大问题而且我的选项已经用完了。我希望有人可以帮助我。

我有一个链接（脚本编号1），在单击后在div中加载html文件（single-project.html）。我使用的是jQuery（脚本编号2）。

但是单个project.html中的脚本编号3并没有运行。

这是一张更清晰的图片

这里是脚本编号3，必须使用id rex填充div

$('#rex').ready(function() {
    var url="genredetail.php";
    var activitydetail = sessionStorage.activitydetail;

    $.getJSON(url,function(json){
        $.each(json.genredetail,function(i,item){
            if(item.name == activitydetail){
                $('<p class="excerpt">' + item.beschreibung3 + '</p>').appendTo('#rex');
            }
        });
    });
});

脚本编号2

$('#betriebe').on('click', '.ajax-portfolio', function() {
        var url = $(this).attr("href");
       $('.close-ajaxWrapper').css("background-color","white");
        $('.close-ajax img').tooltip();
        $('html, body').animate({scrollTop: ($('#div1').offset().top - 100)},'slow', function(){
            $('#div1').load(url + ' #transmitter', function (){
                $('.gallery').slideDown("slow");});
            $('a.close-ajax').click(function(){
                $('.close-ajax img').tooltip('hide')
                $('.close-ajaxWrapper').css("background-color","transparent");
                $('div#filters').slideDown(1000, function(){
                    $('div#div1').empty();
                });
                $('html, body').animate({scrollTop: ($('#div1').offset().top - 0)});

                return false;
            });//End: click()
        });

        return false;

    });

Answer 1

您正在使用$.load插入文档片段。按设计，这将不会执行javascript。您可以在jQuery API docs

中阅读有关加载页面片段和脚本执行的文档

或者，您将脚本3的内容包含在脚本2的$.load回调中，或者将脚本3放在单独的文件中并在加载后立即使用$.getScript执行它HTML片段。

我认为第一个选项在概念上更容易理解，所以你应该试试这个：

$('#betriebe').on('click', '.ajax-portfolio', function() {
  var url = $(this).attr("href");
  $('.close-ajaxWrapper').css("background-color","white");
  $('.close-ajax img').tooltip();
  $('html, body').animate({scrollTop: ($('#div1').offset().top - 100)},'slow', function(){
    $('#div1').load(url + ' #transmitter', function (){

      // this gets executed as soon as the document fragment
      // has been loaded and inserted
      $('.gallery').slideDown("slow");

      var url="genredetail.php";
      var activitydetail = sessionStorage.activitydetail;

      $.getJSON(url, function(json){
        $.each(json.genredetail, function(i,item){
          if (item.name == activitydetail){
            $('<p class="excerpt">' + item.beschreibung3 + '</p>').appendTo('#rex');
          }
        }); // end $.each
      }); // end $.getJSON
    }); // end $.load

    $('a.close-ajax').click(function(){
      $('.close-ajax img').tooltip('hide')
      $('.close-ajaxWrapper').css("background-color","transparent");
      $('div#filters').slideDown(1000, function(){
        $('div#div1').empty();
      });
      $('html, body').animate({scrollTop: ($('#div1').offset().top - 0)});

      return false;
    }); // end: click a.close-ajax
  }); // end: animate

  return false;

});// end: click .ajax-portfolio

Answer 2

您的脚本在创建元素之前加载，所以可能您可以尝试 $（＆＃39; document＆＃39;）。find（＆＃39;＃rex＆＃39;）和链接下一个功能来做你必须做的事情

带有ajax的加载html中的脚本无法运行

2 个答案: