Question

所以我正在建立一个无线电流网站，并被告知我应该使用Jquery和AJAX将HTML文件加载到按钮单击的div中，以便我不必让用户加载一个全新的HTML页面每个无线电流。但是由于我不熟悉这种语言，我有点失落，我不完全确定我做错了什么。

目前我有一个index.html页面，它加载每个div并加载iframe链接到HTML文件的所有可用无线电台。在这个HTML文件中，大约有40个按钮，每个按钮都必须链接到自己的无线电流。按下按钮我希望所说的流加载到'无线电播放器'div中以实现平滑过渡。

尝试谷歌解决问题后，我被告知使用以下JavaScript代码执行此操作：

$(function(){
  $(".538").click(function(){
    $("#div3").load("/includes/about-info.html");
  });
 });

由于每个按钮也显示自己的图像文件，我尝试将class =“538添加到每个图像源，以便JavaScript知道目标是什么。不幸的是，它似乎根本不起作用，我不知道是什么我试图在一个单独的index.js文件中执行此操作，但遗憾的是，该文件无法正常工作，因此我尝试在HTML文件本身中使用JavaScript代码，这似乎也不起作用。

TL / DR：单击图像按钮时尝试在div中加载HTML代码。

是否有可用的教程？我试图在网上搜索但根本找不到任何东西。如果有人能帮我解决这个问题，我会永远爱你。

Answer 1

我认为正在发生的事情是你正在使用动态元素。更重要的是，你不应该使用数字来开始一个类名或id。

除非您发布更多代码，否则很难弄清楚您想要做什么。

如果使用动态html，则click事件将不起作用，因为您需要动态绑定事件侦听器。

为此你可以使用

$('#dynamicElement').on('click', function() {
   $(this).find('#elementYouWantToLoadInto').load('/includes/about-info.html');
});

如果元素嵌套在按钮中，则上述代码有效。如果它是外部元素，那么使用。

$('#dynamicElement').on('click',function() { 

     $('#elementYouWantToLoadInto').load('/includes/abount-info.html');
});

Answer 2

你提到这种语言对你来说有点新鲜;如果你愿意接受一些重构：

您的主页应包含两个部分：

<div id='myButtons'>
    <input type='radio' data-url='/includes/about-info.html' />
    <...>
</div>
<div id='myContent'></div>

<script>
   $(function() {  //jquery syntax - waits for the page to load before running
       $('#myButtons').on('click', 'input', function() {  // jquery: any click from an input inside of myButtons will be caught)
           var button = $(this),
               url = button.data('url'),
               content = $('#myContent');
           content.load(url);
       });
</script>

Jquery：http://api.jquery.com/

Answer 3

你可以试试这个

$('#myButtons').on('click', 'input', function() {  
 $.get("about-info.html", function(data) {
  $("#div3").html(data);
});
 });

或

$(document).ready(function(){
$(function(){
  $(".radio538").click(function(){
    $("#div3").load("/includes/about-info.html");
  });
 });    

})

Answer 4

$(document).ready(function(){
    $('#radio1').on('click',function(){
        #('#loadradiohere').load('/includes/about-info.html');
     });
});

在.js文件中尝试该代码。我还在为一个类似的项目人工作。

单击图像按钮时，无法将HTML代码加载到div中

4 个答案: