Question

背景

我有一个模式，在结束</body>之前作为脚本添加为

<script>
  // Simple modal
  jQuery(function ($) {
    // Load dialog on click
    $('#basic-modal .basic').click(function (e) {
      $('#basic-modal-content').modal();
      return false;
    });
  });
</script>

或者如果我将该函数作为自己的.js文件并以这种方式调用它。

是的，我确实清除了我的缓存并在Inspect Element中验证是否正在调用该脚本。

问题

当我将该函数放入app.js中的主javascript文件中时，则模态不起作用。

当前页面

目前，http://bruxzir.jgallardo.me/test.aspx

提供了测试页

代码

这是我从<head>

调用脚本的顺序

<script src="/assets/js/jquery.js"></script>
<script src="/assets/js/mustache.js"></script>
<script src="/assets/js/headroom.min.js"></script>
<script src="/assets/js/jquery.simplemodal.js"></script>
<script src="/assets/js/swipe.js"></script>
<script src="/assets/js/app.js"></script>
<script src="/assets/js/google-analytics.js"></script>

HTML

<div id='basic-modal'>
  <h3>Basic Modal Dialog</h3>

  <input type='button' name='basic' value='Demo' class='basic'/>
</div>

<!-- modal content -->
<div id="basic-modal-content" class="featured-video">
  <img src="http://placehold.it/720x360&text=Image+1">
  <img src="http://placehold.it/720x360&text=Image+2">
</div>

app.js

/* Video Modal */
function overlay() {
  el = document.getElementById("overlay");
  el.style.display = (el.style.display == "block") ? "none" : "block";
}

/* Fixed Header */
$(window).scroll(function(){
  if ($(window).scrollTop() >= 180) {
    $('nav#page-menu').addClass('fixed-header');
  }
  else {
    $('nav#page-menu').removeClass('fixed-header');
  }
});

/* Main functionality for search of labs in the US */
$('#search').keyup(function () {
    var searchField = $('#search').val();
    var myExp = new RegExp(searchField, "i");
    $.getJSON('labs.js', function (data) {
      console.log(data)
        var output = '<ul class="searchresults">';
        $.each(data, function (key, val) {
          if ((val.abbr.search(myExp) != -1) ||
            (val.state.search(myExp) != -1)) {

              output += '<li>';
                output += '<h5>' + val.name + '</h5>';
                output += val.city + ',&nbsp;' + val.abbr + '&nbsp;' + val.country + '<br />';         
                output += val.phone + '<br />';
                output += '<a href="http://' + val.website + '"' + 'target="_blank"' + '>' + val.website + '</a>';
              output += '</li>';
            }
        });
        output += '</ul>';
      $('#labs-container').html(output);
  });
});

/* Passes data from JSON into international lab list */
$(function() {
  $.getJSON('labs-international.js', function(data) {
    var template = $('#labsCountryList').html();
    var html = Mustache.to_html(template, data);
    $('#countries').html(html);
  });
});

/* Filter for international labs */
$('#lab-country-select').on('change', function (e) {
    e.preventDefault();
    var cat = $(this).val();
    var nam = $(this).val();
    $('#countries > div').hide();
    $('#countries > div[data-category-type="'+cat+'"][data-category-name="'+nam+'"]').show();
});

/* Main functionality for search of international labs */
    $('#search-intl').keyup(function () {
        var searchField = $('#search-intl').val();
        var myExp = new RegExp(searchField, "i");
        $.getJSON('labs-intl.js', function (data) {
          console.log(data)
            var output = '<ul class="searchresults">';
            $.each(data, function (key, val) {
              if ((val.country.search(myExp) != -1)) {

                output += '<li>';
                output += '<h5>' + val.name + '</h5>';
                output += val.city + '<br />';
                output += val.country + '<br />';  
                output += val.phone + '<br />';
                output += '<a href="http://' + val.website + '"' + 'target="_blank"' + '>' + val.website + '</a>';
                output += '</li>';
                }
            });
            output += '</ul>';
          $('#labs-container').html(output);
      });
    });

/* To hide the page navigation */
(function() {
  new Headroom(document.querySelector("#page-menu"), {
    tolerance: 5,
    offset : 180,
    classes: {
      initial: "slide",
      pinned: "slide--reset",
      unpinned: "slide--up"
    }
  }).init();
}());

/* For mobile layout */
$("p").has("img").css({textAlign: "center"});

// Slider for Techincal Information - Polishing Kit
window.mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 0,
  speed: 300,
  auto: 600000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});
// Slider for Techincal Information - Seating Instructions
// Add mySwipe2 here and in HTML control
window.mySwipe2 = new Swipe(document.getElementById('slider-2'), {
  startSlide: 0,
  speed: 300,
  auto: 600000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});

// Captions for slider in Technical Information
$(document).ready(function () {
  var rm = $(".read-more");
  var hi = $('.hide');
  rm.click(function (e) {
    e.preventDefault();
    var now = $(".hide");
    now.slideToggle();
    hi.not(now).filter(':visible').slideToggle();
  });
});

// Simple modal
jQuery(function ($) {
  // Load dialog on click
  $('#basic-modal .basic').click(function (e) {
    $('#basic-modal-content').modal();
    return false;
  });
});

我最初的想法是 app.js 可能存在冲突，所以

Answer 1

试试这个：

// Captions for slider in Technical Information
$(document).ready(function () {
  var rm = $(".read-more");
  var hi = $('.hide');
  rm.click(function (e) {
    e.preventDefault();
    var now = $(".hide");
    now.slideToggle();
    hi.not(now).filter(':visible').slideToggle();
  });

  // Load dialog on click
  $('#basic-modal .basic').click(function (e) {
    $('#basic-modal-content').modal();
    return false;
  });
});

前面提到过我可能知道这个问题的评论，没有对此进行测试，但看看这是否有帮助。我将代码插入document.ready()函数

Modal不在外部文件中工作，但在关闭body标签之前作为脚本添加时有效

背景

问题

当前页面

代码

1 个答案: