jQuery 在 div onClick 中加载内容

Question

我的 'inc' 文件夹中有页面，当我点击 'trigger' 时，#wrapper 会将所选页面加载到 #wrapper 中。我的问题是；

每当我点击#wrapper 之外的'trigger' 时，它就会起作用。内容将加载到#wrapper 中。但是，当我在 #wrapper 中包含 'trigger' 时，它将无法正常工作。

我卡在这个问题上有一段时间了。

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

Answer 1

这是因为元素不可用，因此事件从未绑定。您可以尝试使用 jQuery.load 回调。

$(document).ready(function() {
  var container = $('#wrapper');
  container .load('inc/home.php', function() {
    var trigger = $('#test a');

    trigger.click(function() {
      // your code here
    });
  });
});

或者，您可以对动态元素使用 jQuery.on

更新自

trigger.click(function() {

到

container.on("click", "#test a", function() {

Answer 2

也许您还应该 post 您的 DOM/Html 文件... 可能是触发器的 selection 有问题。尝试 select 它与 class:

<a class="trigger-button">Click Me</a>


var trigger = $('.trigger-button')

jQuery 在 div onClick 中加载内容

jQuery loading content in div onClick

javascript

ajax

jquery

load