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

Может быть, вам также следует опубликовать свой файл DOM / Html ... Возможно, это проблема с выбором триггера.Попробуйте выбрать его с классом:

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


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

Answer 2

Это потому, что элемент не был доступен, следовательно, событие никогда не связывалось.Вы можете попробовать выполнить следующее, используя jQuery.load callback.

$(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() {