Question

在我的index.php中，我有一个加载内容页面的ajax寻呼机（paginator.php）。

的index.php

<script type='text/javascript' src='js/jquery-1.11.1.min.js'></script>
<script type='text/javascript' src='js/paginator.js'></script>
<script type='text/javascript' src='js/functions.js'></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.1.5"></script>

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

paginator.js

$(function() {

  var pageurl = 'paginator.php';

  //Initialise the table at the first run
  $( '#content' ).load( pageurl, { pag: 1 }, function()
  {
    //animation();
  });

  //Page navigation click
  $( document ).on( 'click', 'li.goto', function() 
  {
    //Get the id of clicked li
    var pageNum = $( this ).attr( 'id' );
    $( '#content' ).load( pageurl, { pag: pageNum }, function() 
    {
        //animation();
    });
  });

}); /* END */

paginator.php

<ul><li>..etc </ul>
...
...
<a id='test' vid='123'>get the id</a>

<a id='test2' url='somepage.php'>open fancybox</a>

我想以这种方式获取加载页面的变量（paginator.php），但不幸的是我不能。

functions.js

$(function() {

   $('#test' ).click(function(e)
   {
     var id = $('#test').attr('vid');
     alert ("vid is " + vid);
   });

}); /* END */

在这种情况下，弹出窗口不会出现。

我尝试在我的functions.js中添加fancybox。出现对话框，但未获取url attr。

 var url = $('#test2').attr('url');

 $('#test').fancybox({
   'href'              : url,
   'width'             : 100,
   'height'            : 100,
   'autoScale'         : false,
   'transitionIn'      : 'none',
   'transitionOut'     : 'none',
   'type'              : 'iframe',
   'fitToView'     : true,
   'autoSize'          : false
 });

在其他情况下，如果没有加载页面，我可以这样做，但在这种情况下，行为是不同的。我怎么能这样做？感谢

修改

我的目标是打开一个从加载的页面中获取变量的对话框（fancybox）

EDIT2

我试过这种方式

paginator.php

<a id="test" vid="1234">click me</a>

paginator.js

//Initialise the table at the first run
$( '#content' ).load( pageurl, { pag: 1 }, function()
{
    hide_anim();
    popup();
});

//Page navigation click
$( document ).on( 'click', 'li.goto', function() 
{
    //Get the id of clicked li
    var pageNum = $( this ).attr( 'id' );
    $( '#content' ).load( pageurl, { pag: pageNum }, function() 
    {
        hide_anim();
        popup();
    });
})

function.js

function popup() {
  $('#test' ).click(function(e) {
  e.preventDefault();
  var vid = $('#test').attr('vid');
  alert ("vid is " + vid);
  });
}

但弹出窗口没有出现......

Answer 1

此：

$('#test' ).click(function(e){});

不支持AJAX加载HTML。

正如@ A.Wodff所说，你应该使用事件委托。试试这个：

$('document').on('click', '#test', function(){
    var id = $('#test').attr('vid');
    alert ("vid is " + id);
});

Answer 2

HTML：

<script type='text/javascript' src='js/jquery-1.11.1.min.js'></script>
<script type='text/javascript' src='js/functions.js'></script>
<script type='text/javascript' src='js/paginator.js'></script>

Paginator.js

$( '#content' ).load( pageurl, { pag: 1 }, function() {
    //if load complete
    yourFunctionName();
});

function.js

function yourFunctionName() {
  $(document).on('click', '#test', function(e) {
    e.preventDefault();
    var vid = $('#test').attr('vid');
    alert ("vid is " + vid);
  });
}

这将确保在您尝试访问内容之前加载内容。在你的情况下，当你试图访问#test / vid时，你的dom中没有它。

JQuery从ajax加载的页面获取attr值

2 个答案: