JQuery從ajax獲取attr值加載頁面

在我的index.php中，我有一個加載內容頁面（paginator.php）的ajax分頁器。JQuery從ajax獲取attr值加載頁面

的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 */

在這種情況下彈出不會出現。

我嘗試添加fancybox在我的functions.js。對話框出現，但沒有采取網址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); 
    }); 
}

但彈出沒有出現......

來源

2014-06-12 Paolo Rossi

你爲什麼不委派事件，因爲你已經在爲其他元素''li.goto''做它？無論如何，'id ='＃test''應該是HTML標記中的'id ='test''。 –

你沒有在'id'而不是'vid'聲明'vid'！ –

或簡單地把* paginator.php *的內容使用選擇器html函數，就像這樣 '$（'＃content'）。html（'把內容放在這裏作爲字符串'）;' –

此：

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

不會爲AJAX工作加載HTML。

正如@ A.Wodff所說，你應該使用事件委託。試試這個：

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

來源

2014-06-12 14:57:00

不幸的是它不起作用 –

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(); 
});

功能。js

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

這將確保內容在您嘗試訪問它之前被加載。在你的情況下，當你試圖訪問#test/vid時你沒有在你的dom裏面。

來源

2014-06-12 15:05:32 gulty

我嘗試了你的建議（參見我的編輯2）但彈出窗口不出現... –

你把你的html js中的paginator.js之前的function.js包含在內嗎？ – gulty

是的，我把function.js之前paginator.js –

JQuery從ajax獲取attr值加載頁面

回答

相關問題