AJAX 附加内容不执行 Javascript答案

【问题标题】：AJAX appended content does not execute JavascriptAJAX 附加内容不执行 Javascript
【发布时间】：2018-05-19 07:26:21
【问题描述】：

我已经多次在 Stack Overflow 上看到过这个问题，但我发现的解决方案通常很老，并且谈到了已弃用的 delegate 方法。

我正在寻找 jQuery 3.x 的解决方案。这是我的 AJAX 调用：

$.ajax({
  type: "get",
  url: "/content",
  data: {
    name: {{ name }}
  },
  success: function(data) {
    $("#appendsection").append(data);
  } 
});

在这里，我将成功数据附加到名为 appendsection 的 div 中这个appendsection div 不执行任何javascript，它执行CSS，但没有javascript 和jquery。我大部分时间都看到这个问题，我从 ajax 调用获得的任何数据都不想执行 javascript。

这是附加内容

<div class="sortingbuttons">
        <select id="sort">
        Sort By
          <option value="name">Relevance</option>
          <option value="price">Cheapest</option>
          <option value="recommend">Recommended</option>
        </select>
</div>

#sort id 在app.js 上执行

$('#sort').change(function(){
            $('.section').hide();
            $('#' + $(this).val()).show();
        });

因此，排序不适用于附加内容，因此 javascript 不适用于附加内容。

【问题讨论】：

“不执行 javascript”是什么意思？如果您的意思是没有事件处理程序对其触发，那么您需要使用委托事件处理程序。普通的 AJAX 调用不会对结果产生任何影响。
附加的html内容不会在上面运行javascript，所以如果有像.button.hide();这样的javascript代码，它就不会运行
你什么时候尝试调用这些函数？
你的意思是当返回的data中有JS代码时？这在 jQuery 中永远不会像这样工作。
在附加内容本身上，它会调用这些函数，我正在寻找一种在附加内容后自动调用它的方法

标签： javascript jquery ajax

【解决方案1】：

您的问题的解决方案仍然是委托，但不是方法delegate。

这是 jQuery 1.7+ 中事件委托的结构

$( elements ).on( events, selector, data, handler );

试试这个，希望能成功

$('body').on('change', '#sort', function(){
    $('.section').hide();
    $('#' + $(this).val()).show(); //do anything  
})

【讨论】：

还是不明白，我试过改成body.on function还是不行，请问这个怎么弄
嗨，它应该可以工作，检查这个 jsFiddle jsfiddle.net/adcf0qky 。我试图用标记作为字符串来模仿这里的 ajax 附加，它起作用了。请尝试清除缓存并重新加载。

【解决方案2】：

显然，我通过在成功函数上运行必要的 javascript 代码解决了这个问题

$.ajax({
  type: "get",
  url: "/content",
  data: {
    name: {{ name }}
  },
  success: function(data) {
    $("#appendsection").append(data);
    //execute necessary javascript after this
    $('#sort').change(function(){
        $('.section').hide();
        $('#' + $(this).val()).show();
    });
  } 
});

这可能是委托 javascript 的方法之一，但我确信这不是最好的方法。但就目前而言，这是唯一对我有用的解决方案。

【讨论】：