Fatal编程技术网

Javascript .on（）不起作用

javascript jquery html

Javascript .on（）不起作用,javascript,jquery,html,Javascript,Jquery,Html,我正在使用jquery的.on（）函数，以便在div内容发生更改时能够执行某些操作 这是我的密码： $( "div.contentdata" ).on( "onChange", function() { document.write(".on jquery function is working."); statement . . }); 但是它不起作用 这是完整的代码 <html> <script type="te

我正在使用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>


函数加载表（日志类型）{
var-xmlhttp；
if（window.XMLHttpRequest）{
//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}        
其他的
{
//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
document.getElementById（“contents”）.innerHTML=xmlhttp.responseText；
}
}
如果（日志类型==“选项1”）{
open（“GET”，“/Option1”，true）；
}
else if（日志类型==“选项2”）{
open（“GET”，“/Option2”，true）；
}
xmlhttp.send（）；
} 
横幅
| 

    

  • 系统

      

    • 监测
      • 

    
>
  • 

  • 






创建树（“treeemenu1”，true）
桌子
  • 在
    .on
    上注册的标准事件处理程序不需要
    “on”
    前缀，如果包含该前缀，则无法工作

  • 当Div的内容发生变化时，它们甚至不会触发
    change
    事件

  • 您可以注册在元素更改时触发的“DOMMutation”事件，但它们没有得到广泛支持，并且在下一版本的DOM规范中被替换为替代API

  • 除非您正在编写浏览器扩展，否则如果您的元素的内容正在更改，那么执行此操作的将是您的代码。找出在哪里（可能在Ajax回调中），然后在那里执行任务

  • 您正在使用jQuery—使用
    $.get（）
    而不是使用
    XMLHttpRequest
    对象滚动您自己的Ajax代码

  • 您仍然在使用jQuery-在JS代码中注册所有事件处理程序，而不是使用
    javascript:
    链接“内联”

    • 您的代码运行正常，但
    元素没有
    更改事件。如果在更改
    div.contentdiv
    的innterHTML时需要触发事件，最好在AJAX方法的
    success
    回调中触发（如果使用jQuery的
    $.get（）
    或
    $.AJAX（）
    则非常简单）
    

    你也可以考虑查看，但是这些都是一般的突变事件，可能无法转化为你的要求。
    

    Ben Nadel也在博客中提到了类似的问题。
    这应该改变
    

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

    
为此：
    

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

    
第二件事，请注意div没有这个方法：
    onchange
    ，因为它们的值是静态的，并且没有更改
    
（jquerychange）
    
这用于
    选择
    ，
    输入
    等
    
（jqueryon）
    
jQuery Ajax：
    

    现在人们使用jQueryAjax，所以请使用它
     您可以附加自定义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（…）
    触发的事件类型需要与使用
    时相同。在（…）
    

    元素没有
    更改
    事件。您希望在什么情况下触发事件？为什么不在jquery中使用.ajax（）函数？为什么是划船法？@BenM-ohh好的。我可以用什么来代替更改？单击尝试使用？如何更改div？视情况而定。您希望在什么情况下触发事件@Phoenix jQuery并不总是最好的方法；）即使是
    contenteditable
    元素也不会触发
    change
    事件。@是的，我的div的内容可以更改。正如您在完整代码中看到的，我使用ajax调用从服务器导入数据。div的内容取决于用户在我的导航树中单击的内容。不，不，这不是真正的更改。更改是指值的更改，例如输入或选择元素的更改。Div的值不能更改，但其文本或html可以更改！因此，您需要在
    success
    中执行此操作，而不是在
    change
    函数中执行此操作。当您说success callback时，它到底在哪里？在这个函数中的语句之后？如果（xmlhttp.readyState==4&&xmlhttp.status==200）{document.getElementById（“contents”）.innerHTML=xmlhttp.responseText；}是，就在该函数内部。