Question

我使用jquery的.on（）函数在div内容改变时能够做某事。

这是我的代码：

$( "div.contentdata" ).on( "onChange", function() {
      document.write(".on jquery function is working.");
      statement
      .
      .
      });

然而它无效。

这是完整的代码

<html>
<script type="text/javascript" src="static/path/to/widget-scroller.js"></script>       <script type="text/javascript" src="static/path/to/jquery-latest.js"></script>   
<script type="text/javascript" src="static/path/to/jquery.tablesorter.js"></script>     
<script type="text/javascript" src="static/path/to/jquery.tablesorter.widgets.js"></script>

    <script>    
       function loadTable(logtype) {
       var xmlhttp;         
       if (window.XMLHttpRequest)   {
       // code for IE7+, Firefox, Chrome, Opera, Safari             
          xmlhttp=new XMLHttpRequest();         
       }        
       else
       {
       // code for IE6, IE5             
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");       
        }

       xmlhttp.onreadystatechange=function() {          
          if (xmlhttp.readyState==4 && xmlhttp.status==200) {
               document.getElementById("contents").innerHTML=xmlhttp.responseText;
            }
       }

       if (logtype == "Option1") {
          xmlhttp.open("GET","/Option1",true); 
          }
       else if (logtype == "Option2"){
          xmlhttp.open("GET","/Option2",true);
          }

          xmlhttp.send();   
         } 

       </script> 


   <body> 
  <div id="alldiv">

        <!--Banner Div-->       <div id="bannertable">
                    BANNER


                            </div>

        <div id = "container" >         <table id="holder">             <tr id="tr1">
                    <td id ="td1">
                        <div id = "nav">
                            <a href="javascript:ddtreemenu.flatten('treemenu1', 'expand')">   Expand All</a> | <a href="javascript:ddtreemenu.flatten('treemenu1', 'contact')">Show All</a>
                            <ul id="treemenu1" class="treeview">
                                <li>System
                                    <ul>
                                        <li>Monitoring</li>
                                    </ul>
                            >                                           <li><a href="#" onClick="loadTable('Option1')">Option1</a></li>
                                                <li><a href="#" onClick="loadTable('Option2')">Option2</a></li>

                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>

                            <script type="text/javascript">
                                ddtreemenu.createTree("treemenu1", true)
                            </script>
                        </div>
                    </td>
                    <td id = "td2">
                        <div id = "contents" class="contentdata">
                            tables
                        </div>
                    </td>           </tr>       </table>    </div> </div> 
</body> </html>

Answer 1

使用.on注册的标准事件处理程序不需要"on"前缀，如果包含该前缀，则无效。
当内容发生变化时，Div甚至不会发起change事件。
您可以注册元素更改时执行触发的“DOMMutation”事件，但它们并未得到广泛支持，并且正在替换为下一版本的备用API DOM规范。
除非您正在编写浏览器扩展程序，否则如果您的元素内容发生变化，那么您的代码正在执行此操作。弄清楚在哪里（可能在你的Ajax回调中）并在那里做你的尝试。
您正在使用jQuery - 使用$.get()而不是使用XMLHttpRequest对象滚动您自己的Ajax代码。
您仍在使用jQuery - 在JS代码中注册所有事件处理程序，而不是使用"javascript:"链接“内联”。

Answer 2

您的代码工作正常，但<div>元素没有change事件。如果你需要在更改div.contentdiv的innterHTML时触发一个事件，你最好在你的AJAX方法的success回调中做到这一点（如果使用jQuery的{{1}则非常简单） }或$.get()）。

您也可以考虑查看DOMNodeInserted和DOMNodeRemoved，但这些是一般的突变事件，可能无法转换为您的要求。

Ben Nadel还在博客中发表了类似的问题here。

Answer 3

这应该改变！

$( "div.contentdata" ).on( "onChange", function() {

对此：

$( "div.contentdata" ).on( "Change", function() {

第二件事，请注意div没有这个方法：onchange因为它们的值是静态的并且没有改变。

http://api.jquery.com/change/（jQuery更改）

这用于select，input等。

http://api.jquery.com/on/（jQuery on）

jQuery Ajax：http://api.jquery.com/category/ajax/

人们现在使用jQuery ajax，所以请使用它！

Answer 4

您可以附加自定义eventHandler来执行某些操作，但您必须自己触发它。您可以使用.trigger(...)触发它们。类似的东西：

xmlhttp.onreadystatechange=function() {          
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("contents").innerHTML=xmlhttp.responseText;
        // Trigger your custom eventHandler
        $("div.contentdata").trigger("onChange"); 
    }
}

您使用trigger(...)触发的eventType必须与.on(...)

时使用的相同

http://api.jquery.com/trigger/

.on（）不起作用

4 个答案: