jQuery在div onClick中加載內容

Question

我的“ inc”文件夾中有頁面，當我點擊“觸發器”時，＃wrapper會將所選頁面加載到#wrapper中。 我的問題是；

每當我單擊#wrapper外部的“觸發器”時，它就會起作用。 內容將加載到#wrapper中。 但是，當我在#wrapper中使用“觸發器”時，它將無法工作。

我堅持了一段時間。

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

也許您也應該發布DOM / HTML文件...可能是觸發器選擇方面的問題。 嘗試選擇一個類：

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


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