如何使用JQuery在动态添加的元素上调用事件

时间:2014-02-20 16:59:23

标签: javascript jquery html

我正在使用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应该用于这样的情况,所以我很难接受下一步做什么。

编辑,这是我用来填充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
        }
    });
};

基本上,在加载内容之后需要执行此功能。我最初的实现方法是在填充之前或之后区分内容。再次感谢大家!

2 个答案:

答案 0 :(得分:0)

你需要阻止默认行动。

我尝试过样本数据。

演示: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>");

})

答案 1 :(得分:0)

在页面填充了外部内容之后,必须在上运行您编写/找到以尝试获取href的函数。

e.g

$.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'));

         });
    }
})