訪問HTML元素加載與jQuery .load（）

我有一個div標記的網頁，我不同視圖加載到使用jQuery .load（）訪問HTML元素加載與jQuery .load（）

<div class="main-content"> 
    <div id="load"></div> 
</div>

當我加載像下面的不同視圖，我不能從settings.html

$("#settings").click(function(){ 
    $("#load").load("main/settings.html"); 

    //not working 
    $("#test1").click(function(){ 
     alert('hello'); 
    }); 
});

訪問任何元素按照第二個答案中this後：

事件處理程序僅綁定到當前選定的元素;他們必須存在於你的代碼，使通話時間在頁面上...

所以，我提出我的.click()代碼，目前正在加載的頁面（settings.html在這種情況下），我可以訪問settings.html中的元素。或者，我可以做的建議類似的代碼發佈

$("#settings").click(function(){ 
    $("#load").load("main/settings.html", function(){ 
     $("#test1").click(function(){ 
      alert('hello'); 
     }); 

    }); 
}); 

//or 
$("#settings").click(function(){ 
    $("#load").load("main/settings.html"); 

    $(document).on("click","#test1",function(event){ 
      alert('hello'); 
    }); 
});

但我想知道如何綁定的所有元素假設我不知道哪些時間提前。在上面的例子中，我知道我需要綁定#test1 id。但是，如果我有一個像play.js這樣的文件，我在一個加載的頁面上更改不同的東西，上面列出的方法將要求我將代碼與play.js分開，並將每個代碼放入與加載事件相關的函數中。我有很多事件，並希望我的js像.click()等在一個單獨的文件。

我該如何綁定全部加載時未提前指定它們的元素？或者，我該怎麼辦告訴jQuery來執行類似：

$("#settings").click(function(){ 
    $("#load").load("main/settings.html", function(){ 

     // pseudo code 
     (function(){ 
      bind all elements from main/settings.html to DOM 
     }); 

    }); 
});

所以在它之後列出這樣可以訪問thoese元素的腳本。

<script src="../js/play.js"></script>

來源

2016-08-13 jtlindsey

你檢查過了嗎？ http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Dario

是的，這是在我原來的職位。我更新了我的帖子，嘗試改進問題。 – jtlindsey

將加載頁面中的內容綁定到第一次加載的回調函數中。

$("#settings").click(function(){ 
    $("#load").load("main/settings.html", function(){ 
     $("#test1").click(function(){ 
      alert('hello'); 
     }); 

    }); 
});

來源

2016-08-13 20:48:30 charsi

我更新了我的帖子，嘗試改進問題。 – jtlindsey

這裏其他的答案是好的解決辦法，但我想解釋實際原因這是發生：load是異步功能，也就是說，而不是做一些工作，返回時，它是完成後，它會安排待完成的工作，然後立即返回。

在這種情況下，主叫load意味着最終的main/settings.html內容將被通過的代碼行，它已經運行之後立即時獲得並放置在#load，但不是。因此，您無法選擇尚未創建的元素。

要管理這種編程風格，這些函數通常會接受callback作爲參數，這是另一個函數（由您提供，由用戶提供），稍後在操作完成時將由API調用該函數。在這種情況下，這是load的第二個參數。在此功能中，您可以根據行動的結果採取行動。

來源

2016-08-13 23:59:16 rvighne

謝謝。 Jquery.load有一個可選的第二和第三參數。 3rd是回調函數：http：//api.jquery.com/load/ –

這裏是我會做：

在你的HTML頁面，加載一些<script>就像這樣：

function loadSettings() { 
    $('#test1').click(function() { 
    alert('Hello, world!'); 
    }); 
    // other event handlers... 
}

你可以讓儘可能多的這些，只要你想。

然後：

$("#settings").click(function(){ 
    $("#load").load("main/settings.html", loadSettings); 
});

這將settings.html頁面加載到視圖中，然後調用loadSettings()，這將設置你的事件處理程序。

來源

2016-08-14 00:08:32

訪問HTML元素加載與jQuery .load（）

回答

相關問題