jQuery在div onClick中加载内容答案

【问题标题】：jQuery loading content in div onClickjQuery在div onClick中加载内容
【发布时间】：2018-10-01 12:45:51
【问题描述】：

我的“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;
    });
});

【问题讨论】：

如果您的意思是您的触发元素位于#wrapper div 和加载的html 中，那么您每次执行.load() 调用时都会销毁并创建一个新元素。事件侦听器在元素的新实例中不是持久的。 Event binding on dynamically created elements 的可能重复项

标签： javascript jquery ajax load

【解决方案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() {

【讨论】：

这解决了问题，但仅适用于#wrapper 作品内的第一次点击
声明不清楚 - Only for the first click。你能解释一下吗？
因此，如果您要更新 html，那么第二种解决方案对您有用。对吗？
你说得对，我添加了你的第二个解决方案，它奏效了，非常感谢。
很高兴为您提供帮助:)

【解决方案2】：

也许您也应该发布您的 DOM/Html 文件... 可能是触发器选择的问题。尝试用一个类来选择它：

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


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

【讨论】：