JQuery从ajax加载页面获取属性值_Jquery_Ajax

JQuery从ajax加载页面获取属性值

jquery ajax

JQuery从ajax加载页面获取属性值,jquery,ajax,Jquery,Ajax,在我的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'

在我的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.php

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

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

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

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

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

 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，从加载的页面中获取一个变量

编辑2

我试过这样做

paginator.php

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

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

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

function.js

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

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

但弹出窗口不会出现…

此：

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

不适用于AJAX加载的HTML

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

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

HTML:

function.js

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

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

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

为什么不委派事件，因为您已经为其他元素“li.goto”执行了委派？无论如何，在HTML标记中id='test'应该是id='test'。您还没有在任何地方声明vid，它是id而不是vid！或者简单地使用选择器html函数如so$'content'.html'将paginator.php的内容作为字符串放在这里'@沃尔夫，这是一个奇特的弹出窗口！所以可能是一个必要的@DhavalMarthak所以选择器不正确，应该是：“\\test”你在html js include中将function.js放在paginator.js之前了吗？是的，我在firebug中将function.js放在paginator.js之前了。我看到了引用错误：popup没有定义popup是我的函数名，这是因为定义popup的js文件没有放在你的paginator.js文件之前。我在我的如您所建议的function.js文件。我在paginator.js中的load函数中定义了对popup函数的调用。正如您所建议的，我将functions.js放在pagination.js之前，但不幸的是，我仍然得到了这个错误…：

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