簡體   English   中英

在AJAX請求之后重新加載javascript文件

[英]Reload javascript file after an AJAX request

在請求之后,我的jQuery代碼中的事件處理程序無法識別創建的新元素。

有沒有辦法重新加載文件來重新注冊這些事件?

我假設你的意思是你注冊的元素已經被你的ajax請求的結果所取代的事件沒有被解雇?

使用.live() (請參閱http://api.jquery.com/live/ )針對與選擇器匹配的元素(包括從ajax的結果創建的新DOM元素)注冊事件,而不是結果事件處理程序第一次時的選擇器,當它們被替換時將被銷毀。

例如,替換

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

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

重要:

雖然我建議使用.live()這是為了清晰,因為它的語法類似於.bind() ,如果可能的話你應該使用.on() 有關重要信息,請參閱@ jbabey評論中的鏈接。

這個問題是關於在加載頁面后創建的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/

這段代碼對我來說很完美..

$("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創建一個新腳本(重新加載它)。

要提高網站性能並減少總文件的大小返回,您可以考慮在需要時加載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>

您還可以將點擊處理程序附加到正文,以便它們永遠不會被破壞。

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

解決這個問題的簡單方法

$(document).ready(function(){

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

//do your javascript here..

});
}); 
  var scripts = document.getElementsByTagName("script");
  for (var i=0;i<scripts.length;i++) {
    if (scripts[i].src)
      if(scripts[i].src.indexOf('nameofyourfile')  > -1 )
        var yourfile = scripts[i].src;
  }
  jQuery.get(yourfile, function(data){
  if(data){
     try {
      eval(data);
     } catch (e) {
     alert(e.message);
    }
 }
    });

您可以嘗試使用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/

你是什​​么意思不被jQuery認可?

每次發出請求時,jQuery都會遍歷DOM,因此它們應該是可見的。 然而附屬事件不會。

什么是不可見的?

PS:重新加載JavaScript是可能的,但非常氣餒!

在您的請求回調中,調用一個作用於新添加或創建的塊的函數。

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM