Question

我有该代码的文件

<script language="JavaScript">


function load() { var xmlObj;               
                      if(window.XMLHttpRequest){ 
... ajax function which return result...
 xmlObj.send ('...');}


$(document).ready(function() {
                       $("#desc").click(function() {    
                           $("#contcont").hide();       
                           $("#desccont").fadeIn();
                        });

                       $("#cont").click(function() {    
                           $("#desccont").hide();     
                           $("#contcont").fadeIn();         
                        });
                })


            </script>

并有ajax文件show.php /返回此代码

                              <a id="desc">Desc</a>
                              <a id="cont">Cont</a>


                               <div id="desccont">
                                  desccont
                               </div>

                               <div id="contcont">
                                  contccont
                               </div>

当我点击ids desc和cont时，jQuery不起作用。但是当html代码进入第一个文件时它正常工作

Answer 1

    $(document).ready(function() {
         $('body').on('click', "#desc" , function() {    
              $("#contcont").hide();       
              $("#desccont").fadeIn();
         });

         $('body').on('click', "#cont" , function() {    
             $("#desccont").hide();     
             $("#contcont").fadeIn();         
         });
  })

看看Event binding on dynamically created elements?

注意：如果没有，此代码应该有效..请确保包含jquery

Answer 2

我猜您正在使用ajax调用加载动态内容，并且在尝试连接内容上的事件处理程序之前，您不是在等待实际完成动态内容的加载。 $(document).ready()不等待加载动态提取的内容，仅用于加载原始页面HTML。

因此，在$("#desc").click(...)实际位于文档中之前，您尝试使用#desc之类的代码安装事件处理程序。因此，代码找不到元素，也没有附加点击处理程序。

您可以通过以下两种方式解决这个问题：

不要尝试安装事件处理程序，直到ajax代码实际上已完成插入动态内容。您可以将单击处理程序放在ajax完成函数中来完成此操作。
使用委托事件处理，它将与事后加载的内容一起使用。

委托事件处理背后的基本概念是将事件处理程序附加到已存在且位于文档中的静态父对象。理想情况下，您选择尽可能接近动态元素所在的父级（这样更有效）。然后，事件处理程序使用事件“bubbling”来查看子事件上发生的事件，如果正确使用jQuery的.on()，则可以处理子项上发生的事件。您没有显示HTML的相关部分，因此我们无法推荐最有效的方法来执行此操作。

您可以在以下其他答案中阅读有关如何在jQuery中最好地使用委派事件处理的信息：

Does jQuery.on() work for elements that are added after the event handler is created?

jquery click event doesn't work

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Should all jquery events be bound to $(document)?

JQuery Event Handlers - What's the "Best" method

其他可能的问题：

您的ID值在文档中不是唯一的。必须有不超过一个具有给定id值的元素。
您的代码中某处存在脚本错误，导致无法运行所需的脚本。您应该能够在调试日志中看到此报告。

jQuery无法使用Ajax返回的代码

2 个答案: