Question

在请求之后，我的jQuery代码中的事件处理程序无法识别创建的新元素。

有没有办法重新加载文件以重新注册这些事件？

Answer 1

我假设您的意思是您已经注册了已被ajax请求结果替换的元素的事件未被触发？

使用.live()（请参阅http://api.jquery.com/live/）针对与选择器匹配的元素（包括从ajax的结果创建的新DOM元素）注册事件，而不是选择器的结果当事件处理程序是第一个时，它们将在被替换时被销毁。

e.g。取代

$('div.someClass').click(function(e){
    //do stuff
});

与

$('div.someClass').live('click', function(e){
    //do stuff
});

重要：

虽然我建议使用.live()这是为了清晰起见，因为它的语法类似于.bind()，如果可能，您应该使用.on()。有关重要信息，请参阅@ jbabey评论中的链接。

Answer 2

这个问题是关于加载页面后创建的DOM元素上的绑定事件处理程序。例如，如果在请求ajax之后，您创建了一个新的<div>块并想要捕获onClick事件。

//This will work for element that are present at the page loading
$('div.someClass').click(function(e){
    //do stuff
});

// This will work for dynamically created element but is deprecated since jquery 1.7
$('div.someClass').live('click', function(e){
    //do stuff
});

// This will work for dynamically created element
$('body').on('click', 'div.someClass', function(e){
    //do stuff
});

您可以在此处找到文档：http://api.jquery.com/on/

Answer 3

此代码对我来说非常适合..

$("head script").each(function(){
            var oldScript = this.getAttribute("src");
            $(this).remove();
            var newScript;
            newScript = document.createElement('script');
            newScript.type = 'text/javascript';
            newScript.src = oldScript;
            document.getElementsByTagName("head")[0].appendChild(newScript);
        });

它删除了旧的脚本标记并使用相同的src创建一个新的脚本标记（重新加载它）。

Answer 4

要提高网站性能并减少总文件的大小返回，您可以考虑在需要时加载JavaSript（.js）文件。在jQuery中，您可以使用$ .getScript函数在运行时或按需加载JavaScript文件。

例如，

$("#load").click(function(){
    $.getScript('helloworld.js', function() {
        $("#content").html('Javascript is loaded successful!');
    });
});

当点击ID为“load”的按钮时，它将动态加载“helloworld.js”JavaScript文件。

亲自尝试 在此示例中，当您单击加载按钮时，它将在运行时加载“js-example / helloworld.js”，其中包含“sayhello（）”函数。

<html>
<head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

</head>
<body>
  <h1>Load Javascript dynamically with jQuery</h1>

<div id="content"></div>
<br/>

<button id="load">Load JavaScript</button>
<button id="sayHello">Say Hello</button>

<script type="text/javascript">

$("#load").click(function(){
  $.getScript('js-example/helloworld.js', function() {
     $("#content").html('
          Javascript is loaded successful! sayHello() function is loaded!
     ');
  });
});

$("#sayHello").click(function(){
  sayHello();
});

</script>
</body>
</html>

Answer 5

您还可以将点击处理程序附加到正文，这样它们就不会被破坏。

$('body').on('click', 'a', function(event) {
  event.preventDefault();
  event.stopPropagation();
  // some stuff
})

Answer 6

你的意思是什么不被jQuery识别？

jQuery每次发出请求时都会遍历DOM，因此它们应该是可见的。然而，附属事件不会。

究竟什么不可见？

P.S。：重新加载JavaScript是可能的，但非常气馁！

Answer 7

在请求回调中，调用一个对新添加或创建的块执行操作的函数。

$.ajax({
   success: function(data) {
        $('body').append(data);
        //do your javascript here to act on new blocks
   }
});

Answer 8

解决此问题的简单方法

$(document).ready(function(){

$('body').on('click','.someClass',function(){

//do your javascript here..

});
});

Answer 9

您可以尝试使用loadscript插件加载javascript文件。

forexample 
$("#load").click(function(){
    $.loadScript('path/example.js');
});

or 
$.ajax({
   success: function(data) {
        $.loadScript('path/example.js');
   }
});

http://marcbuils.github.io/jquery.loadscript/

在AJAX请求之后重新加载javascript文件

10 个答案: