[英]jQuery loading content in div onClick
I have pages in my 'inc' folder, when I hit the 'trigger', #wrapper will load the selected page into the #wrapper. 我的“ inc”文件夹中有页面,当我点击“触发器”时,#wrapper会将所选页面加载到#wrapper中。 The problem I have is;
我的问题是;
Whenever I click on 'trigger' outside of the #wrapper it works. 每当我单击#wrapper外部的“触发器”时,它就会起作用。 And the content will load into the #wrapper.
内容将加载到#wrapper中。 But when I have the 'trigger' inside of the #wrapper it won't work.
但是,当我在#wrapper中使用“触发器”时,它将无法工作。
I'm stuck on this for a while. 我坚持了一段时间。
The JS code: JS代码:
$(document).ready(function() {
// Initial
$('#wrapper').load('inc/home.php');
});
$(document).ready(function() {
// Set trigger and container variables
var trigger = $('#test a'),
container = $('#wrapper');
// Fire on click
trigger.click(function() {
var target = $(this).attr('href');
// Begin fade
setTimeout(function(){ $('#wrapper').css("opacity", "0"); }, 0);
// Load target page into container
setTimeout(function(){ container.load('inc/' + target + '.php'); }, 400);
// End fade
setTimeout(function(){ $('#wrapper').css("opacity", "1"); }, 900);
// Stop normal link behavior
return false;
});
});
It is because the element was not available, hence, the event was never binded. 这是因为该元素不可用,因此该事件从未绑定过。 You can try following using jQuery.load callback.
您可以尝试使用jQuery.load回调。
$(document).ready(function() {
var container = $('#wrapper');
container .load('inc/home.php', function() {
var trigger = $('#test a');
trigger.click(function() {
// your code here
});
});
});
Alternatively, you can use jQuery.on for dynamic elements 或者,您可以将jQuery.on用于动态元素
Update from 从更新
trigger.click(function() {
to 至
container.on("click", "#test a", function() {
Maybe you should post your DOM/Html file also... Probably its a problem with the selection of the trigger. 也许您也应该发布DOM / HTML文件...可能是触发器选择方面的问题。 Try to select it with a class:
尝试选择一个类:
<a class="trigger-button">Click Me</a>
var trigger = $('.trigger-button')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.