Question

我已经多次在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不会对附加内容起作用。

Answer 1

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

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

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

试试这个我希望它能起作用

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

Answer 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的方法之一，但我确信这不是最好的方法。但目前，这是唯一对我有用的解决方案。

AJAX附加内容不执行Javascript

2 个答案: