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

因此，我正在为广播流创建一个网站，并被告知我应该使用Jquery和AJAX在单击按钮时将HTML文件加载到一个div中，这样我就不必让用户为每个广播流加载一个全新的HTML页面。但我有点迷茫，因为我对这门语言还不熟悉，我不完全确定我做错了什么

目前，我有一个index.html页面，可以加载每个单独的div，并在链接到html文件的iframe中加载所有可用的无线电台。在这个HTML文件中，大约有40个按钮，每个按钮都必须链接到自己的广播流。按下按钮后，我希望所述流加载到“radio player”div，以实现平稳过渡

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

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

因为每个按钮也显示自己的图像文件，所以我尝试将class=538添加到每个图像源中，以便JavaScript知道目标是什么。不幸的是，它似乎根本不起作用，我也不知道该怎么办。我试图在一个单独的index.js文件中实现这一点，但不幸的是，该文件不起作用，因此我尝试在HTML文件本身中使用JavaScript代码，但这似乎也没有奏效

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

---

是否有这方面的教程？我试图在网上搜索，但什么也找不到。如果有人能帮我解决这个问题，我会永远爱你。

我想现在发生的是，你在处理动态元素。更重要的是，你不应该用数字来开始一个类名或id

除非你发布更多的代码，否则很难准确地知道你想要做什么

如果您使用动态html，那么单击事件将不起作用，因为您需要动态绑定事件侦听器

你可以用

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

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

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

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

---

你提到这种语言对你来说有点新；如果您愿意进行一些重构：

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

<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:

您可以试试这个

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

或

---

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

类名不应该是数值。有错误吗？打开调试器工具并检查，代码看起来fine@KheemaPandey也许你的意思是不应该以数字开头，因为538abc是一个字符串，它也不起作用。我把它全部改为radio538，给我的img源class=radio538，但它仍然不起作用？不要要求教程。这将关闭您的问题，因为这是不允许的。但是如何连接按钮图像源和输入类型？我有40个按钮需要链接到.html页面，如何分别定位一个按钮并为其提供一个单独的html源？@user3859693:注意，在该示例按钮上，有一个数据url属性？它允许您指定.html页面。查看javascript函数：第一个参数是button=$this，它抓取执行单击的按钮；第二个参数是url=button.data'url'，它获取指定的数据url。因此，如果您转到，您可以创建一个原型，人们可以看到您正在谈论的内容的实例。我想我现在明白了，但不知怎的，我在最后一行收到了一条错误消息}；SyntaxError:Missing}在函数body之后，如果您解释代码的工作原理/错误所在，将会有所帮助。在大多数情况下，仅仅是一个片段并不是一个好的答案。这是一个函数，其中html内容通过$获取。获取并将其存储到数据变量中，然后将整个数据存储到用户想要的div中…@xanno还不知道，我想我知道为什么什么都不起作用，但我仍在研究如何修复它。基本上，我使用的是img源作为“按钮”，但是这些图像源没有将它们链接到它们自己唯一的id/name/whateveryoucallit，因此我可以将它们链接到上面的操作。如何做到这一点？您是否在功能上方使用document.ready@user3859693doesn不起作用，但我认为这与此有关，因为我在设置按钮的目标时出错了。我现在完全不明白这一点，哈哈。我认为如果在DOM加载后添加dynamicElement，这仍然不起作用。您需要将事件侦听器绑定到动态元素的静态祖先。看见

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

})

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