如何使用JQuery在動態添加的元素上調用事件

Question

我正在使用PhoneGap構建應用程序。 該應用程序具有從外部資源提取的內容。 在我提取的內容中，有URL。 由於我是在HTML中動態加載內容的，因此創建頁面時href不存在。 我需要的是一種在加載內容后立即找到動態添加的href的方法，並在單擊時在其上調用一個函數。

這是放置內容的html頁面的一部分，特別是在#page-content div ：

<div data-role="content">
    <div id="page-title"></div>
    <div id="page-region"></div>
    <div id="page-content"></div>

</div>

頁面加載內容后，html頁面將更改為：

    <div data-role="content" class="ui-content" role="main">
        <div id="page-title">Mtg: Switchboard and Panelboard Basics: A Tour of the Eaton Hayward Facility<br></div>
        <div id="page-region">Oakland/East Bay<br></div>
        <div id="page-content"><p>THURSDAY February 20, 2014<br>


 OEB Industry Applications Chapter<br>
    - construction, differences, functions, features …<br>
    Speakers: Joseph Burnett, Jason Maffioli, Kendyl Brown, and Bob Salter, Eaton<br>
    Time: Light Dinner at 5:30 PM; Short Presentation at 6:00PM; Tours at 6:30 PM<br>
    Cost: none<br>
    Place:<br>
    Web: <a href="http://www.ThisIsTheUrlINeed.com"> www.ThisIsTheUrlINeed.com  </a></p>
    <p>We will discuss Basics of switchboard construction, functions and features, some     of the basic “dos and don’ts” related to Switchboard specification, differences between Switchboards and Panelboards, some of the differences and similarities between switchboards and <span id="more-4060"></span>switchgear, and application limitations. The short presentation will be followed by a tour where attendees can see first-hand the basic building blocks, and how panelboards and switchboards are built.</p>
<br></div>

    </div> 

我編寫/找到的用於嘗試獲取href的函數是：

    $('#page-content').on('click','a', function(){
        console.log(this);
        currentPage = $(this).attr('href');
        window.open(currentPage, '_blank', 'location=yes')
    });

當我運行console.log時，什么也沒有出現。 我讀到.on應該用於這種情況，因此我對下一步該怎么做感到.on 。

編輯，這是我用來填充html頁面的函數：

function IE_navigate(index) {

    Bindex = index;

    $.mobile.changePage('#eventPage', 'slidefade');

    $.each(data, function(i,item){
        if (i == Bindex) {
              //Clear if page was previously populated


              //Populate page
              $('#page-title').html(item.title + "<br />");
              $('#page-region').html(item.Region + "<br />");
              $('#page-content').html(item.fullInfo + "<br />");



              return false
        }
    });
};

編輯：解決方案由於以下兩個答案的結合（以及其他所有人的所有幫助！），這就是我能夠解決此問題的方法：

function IE_navigate(index) {

    Bindex = index;

    $.mobile.changePage('#eventPage', 'slidefade');

    $.each(data, function(i,item){
        if (i == Bindex) {
              //Clear if page was previously populated


              //Populate page
              $('#page-title').html(item.title + "<br />");
              $('#page-region').html(item.Region + "<br />");
              $('#page-content').html(item.fullInfo + "<br />");

              $(this).ready(function(e) {
                  $('#page-content').on('click','a', function(e){
                    e.preventDefault();
                     console.log(this)
                    currentPage = $(this).attr('href');
                   window.open(currentPage, '_system', 'location=yes')
               });
              });
             // return false;

              return false
        }
    });
};

基本上，該功能需要在內容加載后執行。 我最初的實現方法是不區分填充內容之前或之后的內容。 再次感謝大家！

Answer 1

您需要阻止Default操作。

我已經嘗試過使用示例數據。

演示： http ： //jsfiddle.net/a6NJk/642/

jQuery：

$('#page-content').on('click','a', function(e){
        e.preventDefault();
        console.log(this);
        currentPage = $(this).attr('href');
        window.open(currentPage, '_blank', 'location=yes')
    });
//this function for generating dynamic html
$("#bb").click(function(){
   $("#page-content").append("Web: <a href=\"http://www.ThisIsTheUrlINeed.com\">www.ThisIsTheUrlINeed.com  </a>");

})

Answer 2

在使用外部內容填充頁面之后 ，必須運行您編寫/找到的用於嘗試獲取href的函數。

例如

$.ajax({

    url: 'http://external/foobar.html',
    success: function( data, status, xhr ) {

         // stuff data in #page-content and so on    
         // ...and when the anchor is in DOM;

         $('#page-content').find('a').click(function(){

              dooTheDoo($this.attr('href'));

         });
    }
})